`
liufei.fir
  • 浏览: 686015 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

一个很棒的类似 Facebook 风格的 TextboxList

阅读更多
TypeHere.keyup(function (e) {
     switch (e.keyCode) {
         case 188: // ','
            var myInputLength = TypeHere.val().length;
            var myInputText = TypeHere.val().substring(0, myInputLength - 1); // remove ','
            TypeHere.width(myInputLength * 6 + 15);
            //Check for email validation. //You can apply webservices for any type of validation.
            var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
            if (myInputText.length == 0) {
                TypeHere.val('');
                return false;
            }
            if(!emailReg.test(myInputText)) {
              alert('Email Is Invalid');
              TypeHere.val('');
              return false;
            }
            //Create the list item on fly and apply the css
            CreateLi(myInputText)
            //Save into Textbox or HiddenField
            var strValue = txtValues.val() + myInputText + ';';
            txtValues.val(strValue);
            //Push the textbox to the right
            TypeHere.width(myInputLength * 6 + 15);
            //Make the input width to default and set as blank
            liTypeHere.css('left', TypeHere.position().left + TypeHere.width() + 10);
            TypeHere.val('');
            TypeHere.width(10);
            break;
       }
});
分享到:
评论

相关推荐

    textBoxList

    TextBoxList 是一个基于JavaScript实现的多选输入组件,它提供了智能提示功能,用户在输入时可以接收到相关建议,从而提高输入效率。这种组件在网页表单设计中常见,尤其适用于需要用户输入多个相似或相关选项的情况...

    TextboxList_VC++源码_源码

    `TextboxList_VC++源码`很可能是一个自定义控件,它结合了这两者的特性,使用户能够在列表中选择一个项,并且这个选择会显示在一个单独的文本框中,这样既方便用户查看当前选中的值,又保持了列表的可选择性。...

    TextboxList:MooTools令牌生成器

    TextboxList很棒! 如何使用 TextboxList本质上非常易于使用,但具有极高的可配置性和可扩展性。 让我们回顾一些示例使用场景: #JS new TextboxList('form_tags_input'); 这会将<input id="form_tags_input"&...

    自动填充控件

    在给定的标题和描述中,提到了一个使用Prototype Library开发的自动填充控件,类似于Facebook的TextboxList控件。Prototype Library是一个流行的JavaScript库,它提供了一系列实用的DOM操作方法和对象扩展,使得...

    花式Facebook样式文本框列表

    "花式Facebook样式文本框列表"是一个独特设计的交互式控件,旨在提升用户体验,尤其在处理多条输入数据时。这个控件模仿了Facebook的某些设计元素,为用户提供了一种直观且美观的方式来输入和管理多个文本信息。 ...

    超酷的autoComplate组件2

    3. **自定义模板**:为了实现个性化和美化,TextBoxList很可能允许开发者自定义显示模板,包括字体、颜色、图标等,以符合应用的整体设计风格。 4. **多格式支持**:不同的应用场景可能需要处理不同类型的数据,如...

    protoautocompletelist

    标题“protoautocompletelist”和描述中的相同短语暗示我们关注的是一个与自动完成功能相关的原型(Proto)实现,可能是一个JavaScript库或者一个特定的编程实践。在Web开发中,自动完成通常用于提高用户体验,它...

    16个SNS网站常用JS组件

    5. **textboxlist.js** - 这可能是一个专门处理文本输入框的JavaScript组件,用于创建可编辑的列表或者实现更复杂的功能,比如自动完成、多值输入等。 6. **test.js** - 另一个JavaScript文件,可能包含了测试代码...

    jQuery学习记录----可编辑的表格(六)

    在本篇博客“jQuery学习记录----可编辑的表格(六)”中,作者分享了如何使用jQuery实现一个可编辑的表格功能。这个功能在Web应用中非常常见,特别是在数据管理和展示场景下。jQuery是一个强大的JavaScript库,它...

    CAP4J3.5-M-32

    CAP4J是一个开发平台,它提供了一系列的组件和工具以简化开发过程,特别是针对Web应用系统的开发。本文将详细介绍CAP4J平台中一些关键技术和组件的使用方法,为基于CAP4J3.5平台的项目开发人员提供指导。 ### AJAX...

    ANDI-开源

    1. **ASP.NET TextBoxList Control.sln**:这是一个Visual Studio解决方案文件,包含了一个名为TextBoxList的ASP.NET控件项目。TextBoxList可能是一个自定义控件,允许用户在网页上以列表形式输入多行文本。在Web...

    js 动态为textbox添加下拉框数据源的方法

    `.autocomplete()`是一个jQuery UI组件,它能够为输入框提供自动补全的功能,即在用户输入文字的时候,显示出一个下拉框,列出可能的匹配项供用户选择。这个下拉框的数据可以是静态的,也可以是动态从服务器端获取的...

Global site tag (gtag.js) - Google Analytics