`

jquery 监控textare input 的value值变化

 
阅读更多

  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/JS监听input输入框值变化实例

    在本文中,我们将探讨如何使用jQuery和JavaScript来监听HTML input元素的值变化事件。文章首先介绍了input元素值变化的不同监听方法,并详细解释了每种方法的工作原理、适用场景以及可能遇到的问题。 首先,文章...

    关于jquery input textare 事件绑定及用法学习

    (1)jquery 绑定事件 目前1.7以上,jquery的事件绑定已经用on替换了原来的bind; 区别:(个人理解)bind是一次绑定事件到每一个子节点;on是只绑定到父节点,然后冒泡到各个子节点; 用法:bind 一个事件,一个方法:$...

    jQuery文本框(input textare)事件绑定方法教程

    目前1.7以上,jquery​的事件绑定已经用on替换了原来的bind,接下来为大家介绍下bind的使用方法及input textare事件,感兴趣的朋友可以参考下 (1)jquery 绑定事件 目前1.7以上,jquery的事件绑定已经用on替换了原来...

    jquery根据name取得select选中的值实例(超简单)

    实例如下所示: &lt;select name=region[province] id= class=region valid&gt; &lt;option value=0 selected=selected tier=1&gt;省、直辖市 &lt;option tier=1 value=2&gt;北京市 &lt;/select&gt;...$(#textare

    jQuery Mobile 表单自动填充

    jQuery Mobile 表单自动填充 支持input textare radio checkbox select 等标签

    显示textare所输入字数

    charCount.textContent = textarea.value.length + ' 字'; } ``` 3. **Odoo集成**: 在Odoo中,我们需要将上述HTML和JavaScript代码集成到视图模板中。这可以通过XML文件完成,其中包含`&lt;template&gt;`标签来定义...

    VUE监控textarea输入的字符数量

    VUE监控textarea输入的字符数量,实时显示可以输入多少个文字。

    textarea框增加行号效果

    let lines = textarea.value.split('\n'); lineNumbers.innerHTML = lines.map((_, index) =&gt; `${index + 1}&lt;/span&gt;`).join(''); setLineNumbersWidth(); } function setLineNumbersWidth() { const ...

    jquery-numberedtextarea:带有行号的响应文本区域

    jquery-numberedtextarea 带有行编号的响应文本区域。基本用法$('#your_textarea').numberedtextarea();选项$('#your_textarea').numberedtextarea({ color: null, // Font color borderColor:null, // Border color...

    jQuery编写textarea输入字数限制代码

    本文实例为大家分享了jQuery textarea输入字数限制的具体代码,供大家参考,具体内容如下 //先判断浏览器是不是万恶的IE var bind_name = 'input';//默认事件 if (navigator.userAgent.indexOf("MSIE") != -1) {...

    textarea全屏代码.zip

    在网页设计中,`textarea` 是一个非常常见的元素,它用于收集用户输入的多行文本。全屏代码指的是将 `textarea` 扩展至浏览器窗口的全屏模式,以提供更舒适的编辑体验,特别是对于编写大量文本或者代码的场景。...

    Textarea在光标停留处插入文字

    textarea.value = value.slice(0, cursorPos) + newText + value.slice(cursorPos + 1); // 保持光标位置不变 textarea.setSelectionRange(cursorPos + 1, cursorPos + 1); }); ``` 在实际应用中,可能还需要...

    前端uniapp表情插件

    【前端uniapp表情插件】是专为基于uniapp框架的前端开发设计的一款组件,用于在应用程序中集成和管理各种表情符号,提升用户在聊天、评论等交互场景下的体验。uniapp是一个多端开发框架,它允许开发者用一套代码编写...

    textarea显示行号

    这个插件的工作原理主要是通过监听`textarea`中的内容变化,动态计算每一行的起始位置,并在`textarea`旁边创建一个虚拟的区域来显示这些行号。当用户输入、删除或者复制粘贴文本时,插件会自动更新行号,保持与`...

    JS清空多文本框、文本域示例代码

    var t = document.getElementsByTagName(“INPUT”); for (var i=0; i &lt;t.length;i++){ if (t[i].type==’text’){ ++sum; t[i].value=””;//清空 } } var sum1=0; var t1 = document.getElementsByTagName(...

    flex TextArea加链接和link事件

    在IT行业中,尤其是在Web开发领域,富文本编辑器(Rich Text Editor)是常见的用户界面组件,它允许用户创建和编辑带有格式的文本,比如插入链接、图片等。本篇文章将聚焦于Flex环境下如何在TextArea组件中添加链接...

    关于js对textarea换行符的处理方法浅析

    当我们尝试获取`textarea`的值时,`textarea.value`会包含这些`\n`字符。例如,以下是一个简单的`textarea`实例: ```html &lt;textarea name="" id="textareaid" cols="30" rows="10"&gt;&lt;/textarea&gt; ``` 要检查`...

    Vue实现动态显示textarea剩余字数

    textarea maxlength="200" @input="descInput" v-model="desc" /&gt; &lt;span&gt;{{remnant}}/200 javascript代码如下: data(){ return{ remnant: 200 } } methods:{ descInput(){ var txtVal = this.desc.length...

Global site tag (gtag.js) - Google Analytics