`
qll3609120
  • 浏览: 56903 次
社区版块
存档分类
最新评论

输入框的联动效果,当输入框内容改变时,其他跟着变化(适合于标签)

 
阅读更多

输入框联动效果,即当我改变输入框的值 相应的会有其他地方做出改变 监听事件:keyup  就像写博客添加标签一样 集体代码如下

                       $("#test2").keyup(function(){//输入框keyup监听事件
					$("#reciver").empty();//先把级联的对象置空
					var reciver = $("#test2").val().split(',');//因为我以逗号作为输入框内容的分割点 
					for(var i=0;i<reciver.length;i++){//遍历输入框的内容
						if($.trim(reciver[i])==''){//空 不作处理
						
						}else{//在联动对象那里添加一个span内容就是输入框reciver[i]的值
							$("#reciver").append('<span class="info">'+reciver[i]+'</span>');
						}
					}
			});

一开始用change 但是只能失去焦点才对输入框的内容做判断 所以不能及时监听 上面的代码 是只要我改变输入框的内容  也就是键盘的keyup事件发生 都会进行联动 尤其适合一篇文档标签的添加删除

 

 

分享到:
评论

相关推荐

    js实现下拉框二级联动

    最后,实现下拉框二级联动不仅限于以上示例场景,它还可以广泛应用于其他有类似需求的场景,比如地区选择、商品类别和详细规格选择等。通过灵活运用JavaScript和HTML,可以创建更加友好和高效的用户交互体验。 ...

    基于inputbox的省市区4级联动

    在IT领域,"基于inputbox的省市区4级联动"是一种常见的前端交互设计,它用于在用户输入时提供逐级筛选的下拉选项,通常应用于地址选择或信息填写场景。这种设计可以提升用户体验,减少输入错误,使得数据的录入更加...

    无刷新联动的三个案例包含JS,AJAX,ASP.NET

    Web API允许创建RESTful服务,可以被AJAX轻松调用,而SignalR则提供了一种实时双向通信机制,适合于需要即时更新的场景,如聊天室、股票报价等。 总结来说,无刷新联动通过JS、AJAX和ASP.NET等技术,实现了用户界面...

    三级联动省市县+时间滚轮选择合集(4种风格)

    在IT行业中,用户界面(UI)的设计是至关重要的,特别是涉及到数据选择时的交互性。"三级联动省市县+时间滚轮选择合集(4种风格)"是一个专门针对这种需求的资源包,它包含了用于创建高效、易用的地理位置选择和时间...

    AntDesign组件库目录.docx

    - **查询模式-不确定类目**: 当用户输入字符时,自动完成建议列表的变化。 - **API**: 提供了自动完成组件的API文档。 **4.2 Cascader 级联选择** - **基本用法(省市区级联)**: 支持多级联动的选择,常见于省市...

    海量经典的jQuery插件集合

    - **应用场景**:适用于需要定制化文件输入框样式的项目。 **6. ProgressBarPlugin** - **功能概述**:提供进度条功能。 - **应用场景**:配合文件上传插件使用,展示上传进度。 #### 二、表单验证插件(Form ...

    web组建开发指南

    - **textarea标签**:创建多行文本输入区域,适合输入较长的文本内容。 - **label标签**:为其他表单控件创建标签,提高表单的可访问性和可用性。 - **checkboxGroup标签**:创建一组复选框,方便管理和操作多个...

    ajax经典案例(适合初学者参考)

    二级联动通常应用于地区选择等场景,当用户选择一级菜单时,二级菜单会根据一级菜单的选择动态改变。 **1. 实现思路** - 定义两个下拉菜单,初始时第二个菜单为空。 - 当第一个下拉菜单发生变化时,通过AJAX发送...

    jQuery点击Input框弹出日历代码.zip

    由于代码提供者提到可以二次修改,意味着你可以根据实际需求调整样式和功能,如增加多语言支持、日期范围限制或与其他表单元素联动等。 总之,"jQuery点击Input框弹出日历代码"是一个结合了jQuery、CSS和HTML的实用...

    ios-ZPDatePicker.zip

    标签“键盘”可能意味着ZPDatePicker能够与键盘输入行为进行联动,例如,当用户在特定输入框中点击时,该自定义日期选择器会弹出,替代默认的软键盘,提供更直观的日期选取体验。这种集成方式可以减少用户在屏幕上...

    JQuery LigerUI

    它适合于需要用户从多个选项中选择多个的情况,例如设置用户权限或选择项目。 ### 7. 表单(Form) LigerUI提供了强大的表单组件,能够自动绑定数据模型,支持多种表单控件如文本框、单选框、复选框等。表单验证...

    阿里巴巴交互设计实习生笔试题汇总.pdf

    - 新闻报道:通过多屏联动展示丰富的多媒体内容。 - 社交媒体:利用不同设备的特点提供差异化服务。 - **实现策略:** - 内容适配:确保内容在不同设备上都能良好展示。 - 交互统一:保持核心操作的一致性,提升...

    蓝凌系统表单JS大全(持续更新)

    例如,当用户选择某个选项时,可以自动显示或隐藏相关的输入框。 3. **事件处理**:JS可以监听表单的各种事件,如点击、改变、提交等,根据这些事件触发相应的处理函数,实现功能扩展。例如,提交前的确认对话框、...

    城市选择JS控件,集合

    三级联动城市选择控件是一种常见的实现方式,当用户选择省份时,城市列表会自动更新,进一步选择城市后,区县列表也会随之变化。这种动态加载的数据结构可以有效减少页面加载时间,提高用户体验。实现这种功能通常...

    日期插件 封装datepicker插件

    这样,当调用插件时,只需要传入必要的参数,其他参数将自动采用默认值。 3. 缩减API接口:设计一个简化的初始化方法,如`initDatePicker`,接收必要的参数,如ID或DOM元素,以及用户可能自定义的配置项。这将大大...

    c_MSFlexGrid编辑功能增强类

    6. **数据绑定**:`FlexGridBinder`类名暗示了可能包含数据绑定功能,使得`MSFlexGrid`能够与数据库或其他数据源联动,实时更新显示内容。 7. **性能优化**:对于大数据量的处理,增强类可能会有优化策略,以提高...

    EXT学习心得,ext

    例如,当`bankFullName`下拉框发生改变时,触发`Ext.getCmp('bankTypeCd').setValue(Ext.getCmp('bankFullName').getValue());`,这使得`bankTypeCd`下拉框的值与`bankFullName`同步。这种方式非常适合实现联动选择...

    EasyUI总结学习.doc

    查询功能则通常与输入框和按钮结合,当用户输入查询条件并提交后,`datagrid`会重新加载满足条件的数据。 6. **修改和逻辑删除**: - 在 EasyUI 中,可以实现行数据的编辑功能,通过点击编辑按钮,将行变为可编辑...

    颜色选择zDialog(兼容各个版本浏览器)

    4. 获取和设置颜色:zDialog提供了获取和设置颜色值的方法,可以方便地与表单或其他元素联动。 四、实战应用 在网页表单中,可以将zDialog应用于背景色、字体色等颜色设置字段,用户点击后弹出颜色选择器,选择颜色...

Global site tag (gtag.js) - Google Analytics