js监听输入框值的即时变化 网上有很多关于 onpropertychange、oninput的讲解,但是他们都不是我想要的,我想要的是动态的监听input,textarea等之前值和之后改变的值,比如像KISSY中的valuechange事件一样,当我在输入框里面开始输入1的时候,那么之前值是undefined,现在的值是1,当我接着输入2时候,那么之前的值是1,现在的值是2.等,我想要获取这种效果,因为如果有这种方法的话,那么我以后做input,textarea等操作时候,是非常方便的,比如我想监听textarea值的变化,如果变化了我该做什么操作,如果值没有变化,我又该做什么事情,是非常方便的使用。
$.event.special.valuechange = { teardown: function (namespaces) { $(this).unbind('.valuechange'); }, handler: function (e) { $.event.special.valuechange.triggerChanged($(this)); }, add: function (obj) { $(this).on('keyup.valuechange cut.valuechange paste.valuechange input.valuechange', obj.selector, $.event.special.valuechange.handler) }, triggerChanged: function (element) { var current = element[0].contentEditable === 'true' ? element.html() : element.val() , previous = typeof element.data('previous') === 'undefined' ? element[0].defaultValue : element.data('previous') if (current !== previous) { element.trigger('valuechange', [element.data('previous')]) element.data('previous', current) } } }
$(function () { $('#text').on('valuechange', function (e, previous) { $('#output').append('previous: ' + previous + ' -- current: ' + $(this).val() + '<br />') }) })
HTML测试代码:
<input id="text" type="text" />
<div id="output"></div>
来源: http://www.cnblogs.com/tugenhua0707/p/3733395.html
相关推荐
在本文中,我们将探讨如何使用jQuery和JavaScript来监听HTML input元素的值变化事件。文章首先介绍了input元素值变化的不同监听方法,并详细解释了每种方法的工作原理、适用场景以及可能遇到的问题。 首先,文章...
(1)jquery 绑定事件 目前1.7以上,jquery的事件绑定已经用on替换了原来的bind; 区别:(个人理解)bind是一次绑定事件到每一个子节点;on是只绑定到父节点,然后冒泡到各个子节点; 用法:bind 一个事件,一个方法:$...
目前1.7以上,jquery的事件绑定已经用on替换了原来的bind,接下来为大家介绍下bind的使用方法及input textare事件,感兴趣的朋友可以参考下 (1)jquery 绑定事件 目前1.7以上,jquery的事件绑定已经用on替换了原来...
实例如下所示: <select name=region[province] id= class=region valid> <option value=0 selected=selected tier=1>省、直辖市 <option tier=1 value=2>北京市 </select>...$(#textare
jQuery Mobile 表单自动填充 支持input textare radio checkbox select 等标签
charCount.textContent = textarea.value.length + ' 字'; } ``` 3. **Odoo集成**: 在Odoo中,我们需要将上述HTML和JavaScript代码集成到视图模板中。这可以通过XML文件完成,其中包含`<template>`标签来定义...
VUE监控textarea输入的字符数量,实时显示可以输入多少个文字。
let lines = textarea.value.split('\n'); lineNumbers.innerHTML = lines.map((_, index) => `${index + 1}</span>`).join(''); setLineNumbersWidth(); } function setLineNumbersWidth() { const ...
jquery-numberedtextarea 带有行编号的响应文本区域。基本用法$('#your_textarea').numberedtextarea();选项$('#your_textarea').numberedtextarea({ color: null, // Font color borderColor:null, // Border color...
本文实例为大家分享了jQuery textarea输入字数限制的具体代码,供大家参考,具体内容如下 //先判断浏览器是不是万恶的IE var bind_name = 'input';//默认事件 if (navigator.userAgent.indexOf("MSIE") != -1) {...
在网页设计中,`textarea` 是一个非常常见的元素,它用于收集用户输入的多行文本。全屏代码指的是将 `textarea` 扩展至浏览器窗口的全屏模式,以提供更舒适的编辑体验,特别是对于编写大量文本或者代码的场景。...
textarea.value = value.slice(0, cursorPos) + newText + value.slice(cursorPos + 1); // 保持光标位置不变 textarea.setSelectionRange(cursorPos + 1, cursorPos + 1); }); ``` 在实际应用中,可能还需要...
【前端uniapp表情插件】是专为基于uniapp框架的前端开发设计的一款组件,用于在应用程序中集成和管理各种表情符号,提升用户在聊天、评论等交互场景下的体验。uniapp是一个多端开发框架,它允许开发者用一套代码编写...
这个插件的工作原理主要是通过监听`textarea`中的内容变化,动态计算每一行的起始位置,并在`textarea`旁边创建一个虚拟的区域来显示这些行号。当用户输入、删除或者复制粘贴文本时,插件会自动更新行号,保持与`...
var t = document.getElementsByTagName(“INPUT”); for (var i=0; i <t.length;i++){ if (t[i].type==’text’){ ++sum; t[i].value=””;//清空 } } var sum1=0; var t1 = document.getElementsByTagName(...
在IT行业中,尤其是在Web开发领域,富文本编辑器(Rich Text Editor)是常见的用户界面组件,它允许用户创建和编辑带有格式的文本,比如插入链接、图片等。本篇文章将聚焦于Flex环境下如何在TextArea组件中添加链接...
当我们尝试获取`textarea`的值时,`textarea.value`会包含这些`\n`字符。例如,以下是一个简单的`textarea`实例: ```html <textarea name="" id="textareaid" cols="30" rows="10"></textarea> ``` 要检查`...
textarea maxlength="200" @input="descInput" v-model="desc" /> <span>{{remnant}}/200 javascript代码如下: data(){ return{ remnant: 200 } } methods:{ descInput(){ var txtVal = this.desc.length...