统计字数oninput?keyup?onchange?

在开发中,经常会遇到实时统计文本框或文本域中输入字符的个数,超过规定位数后禁止再输入。

<div>
    <textarea name="content" id="content" cols="30" rows="10"></textarea>
    <p>剩余输入字符个数:<span>140</span></p>
</div>
// 字符输入区域
var content = document.querySelector("#content");
// 统计剩余字符数
var words = document.querySelector("p span");

首先我们可能想到onchange事件。

一、onchange事件

当元素的值发生改变时,会触发change事件。该事件仅适用于<input>, <select><textarea> 元素。当用于<select>元素时,change 事件会在选择某个选项时发生。当用于<input><textarea>时,该事件会在元素失去焦点时发生。

content.addEventListener("change", function(e){
    var numbers = this.value.length;
    if(numbers >= 140){
        e.preventDefault();
    }
    words.innerHTML = 140 - numbers;
});

结果:并不是我们想要的,因为只有失去焦点时,才能触发该事件!

二、keypress、keydown、keyup事件

用户按下键盘上的字符键(释放键盘上的键)时触发,任何可以获得焦点的元素都可以触发keypress事件,且按下任何能够影响文本显示的键时就会触发(例如回车键)。

content.addEventListener("keypress/keydown/keyup", function(e){
    console.log("被触发了!!!");
    var numbers = this.value.length;
    if(numbers >= 140){
        e.preventDefault();
    }
    words.innerHTML = 140 - numbers;
});

说明:在chrome51下测试结果

  • 按住某一字符键不放时,“keydown”会被重复触发,而“keypress”并不会触发;
  • esc、删除键、ctrl、shift等只会触发“keydown”事件,而“keypress”并不会触发;
  • 回车会同时触发“keydown”和“keypress”事件;
方法 字数统计准确性 是否可以控制个数 是否限制粘贴情况
keydown 不准确 可以 不完全可以
keypress 不准确 可以 不可以(不触发)
keyup 准确 不可以 不可以

问题

(1)keypress和keydown是在键盘按下时触发,此时var numbers = this.value.length;长度为0,所以会导致统计时差一个字符。

(2)粘贴情况下,keydown一次性超过指定位数(140)无法控制,keypress不会被触发;而keyup已后知后觉!!

三、oninput事件

oninput是HTML5的标准事件,对于检测<input><textarea>元素通过用户界面发生的内容变化非常有用,在内容修改后立即被触发。

The change event is fired for <input>, <select>, and <textarea> elements when a change to the element’s value is committed by the user. Unlike the input event, the change event is not necessarily fired for each change to an element’s value.

即oninput实时触发,onchange事件需要失去焦点才触发!!!

content.addEventListener("input", function(e){
    var numbers = this.value.length;
    if(numbers >= 140){
        // e.preventDefault();
        this.value = this.value.slice(0, 140);
    }
    words.innerHTML = 140 - numbers < 0 ? 0 : 140 - numbers;
});

e.preventDefault()不能取消input的行为,因为其e.cancelable为false,只有true的情况下才可以取消行为。

bool = event.cancelable

The result is a Boolean, which is true if the event can be canceled. bool contains true or false, depending on whether the event can have its default action prevented.

注意:IE下使用onpropertychange代替onchange。

$(‘textarea‘).bind(‘input propertychange‘, function() {}

四、textInput事件

只有可编辑区域才有该事件,用户按下能够输入实际字符的键时才会被触发(例如退格键不会触发)。在文本插入文本框之前触发,通常用于过滤敏感词。

content.addEventListener("textInput", function(e){
    var numbers = this.value.length;
    if(numbers >= 140){
        e.preventDefault();
    }
    words.innerHTML = 140 - numbers < 0 ? 0 : 140 - numbers;
}, false);

对粘贴控制不是很好!但textInput事件对于过滤敏感词汇很有作用!

content.addEventListener("textInput", function(event){
    // event.data的值是用户输入的字符
    console.log(event.data);
    var sensitiveWordAry = ["李", "刚"];
    if(sensitiveWordAry.indexOf(event.data) >= 0){
        // 输入的字符存在于敏感数组中,则禁止输入
        event.preventDefault();
    }
});

关于事件,请查看:事件

时间: 2024-10-14 18:47:49

统计字数oninput?keyup?onchange?的相关文章

总结oninput、onchange与onpropertychange事件的用法和区别 书写搜索的神奇代码

总结oninput.onchange与onpropertychange事件的用法和区别 最近手机开发一个模糊搜索的功能组建,在网上就找到这篇文章! 前端页面开发的很多情况下都需要实时监听文本框输入,比如腾讯微博编写140字的微博时输入框hu9i动态显示还可以输入的字数.过去一般都使用onchange/onkeyup/onkeypress/onkeydown实现,但是这存在着一些不好的用户体验.比如onchange事件只在键盘或者鼠标操作改变对象属性,且失去焦点时触发,脚本触发无效:而onkeyd

oninput,onpropertychange,onchange的用法和区别

1.前言 由于工作需要,需实现一个类似于微博输入框的功能,在用户动态输入文字的时候,修改提示"您还可以输入XX字".如下图所示: 因此,稍微研究了一下oninput,onpropertychange,onchange的区别和用法,以及onpropertychange在ie浏览器下的一个bug. 2.oninput,onpropertychange,onchange的用法 l          onchange触发事件必须满足两个条件: a)当前对象属性改变,并且是由键盘或鼠标事件激发的

oninput,onpropertychange,onchange的使用方法和差别

1.前言 因为工作须要,需实现一个相似于微博输入框的功能,在用户动态输入文字的时候,改动提示“您还能够输入XX字”.例如以下图所看到的: 因此,略微研究了一下oninput,onpropertychange,onchange的差别和使用方法,以及onpropertychange在ie浏览器下的一个bug. 2.oninput,onpropertychange,onchange的使用方法 l          onchange触发事件必须满足两个条件: a)当前对象属性改变,而且是由键盘或鼠标事件

html5与js关于input[type=&#39;text&#39;]文本框value改变触发事件一些属性的区别oninput,onpropertychange,onchange和文本框的value点击全选状态onclick=&quot;select();&quot;。做购物车页面时会要用到。

关于input[type='text']文本框value改变触发事件一些属性的区别oninput,onpropertychange,onchange和文本框的点击全选状态onclick="select();".做购物车页面时会要用到. input[type='text']文本框value改变触发事件一些属性的区别oninput,onpropertychange,onchange: 1.onchange事件与onpropertychange事件的区别:onchange事件在内容改变(两次

oninput,onpropertychange,onchange的用法和区别【转载】

1.前言 由于工作需要,需实现一个类似于微博输入框的功能,在用户动态输入文字的时候,修改提示“您还可以输入XX字”.如下图所示: 因此,稍微研究了一下oninput,onpropertychange,onchange的区别和用法,以及onpropertychange在ie浏览器下的一个bug. 2.oninput,onpropertychange,onchange的用法 l          onchange触发事件必须满足两个条件: a)当前对象属性改变,并且是由键盘或鼠标事件激发的(脚本触发

监听输入框变化(oninput,onpropertychange,onchange)

oninput,onpropertychange,onchange: oninput是onpropertychange的非IE浏览器版本,支持firefox和opera等浏览器,但有一点不同,它绑定于对象时,并非该对象所有属性改变都能触发事件,它只在对象value值发生改变时奏效. onpropertychange的话,只要当前对象属性发生改变,都会触发事件,但是它是IE专属的: onchange触发事件必须满足两个条件: a)当前对象属性改变,并且是由键盘或鼠标事件激发的(脚本触发无效) b)

textarea还剩余字数统计,支持复制粘贴的时候统计字数

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>textarea还剩余字数统计 - 懒人建站 http://www.51xuediannao.com/</title> <style type="text/css"> body,a{ font-size: 14px; color: #555;;} .wordCo

总结oninput、onchange与onpropertychange事件的用法和区别

前端页面开发的很多情况下都需要实时监听文本框输入,比如腾讯微博编写140字的微博时输入框hu9i动态显示还可以输入的字数.过去一般都使用onchange/onkeyup/onkeypress/onkeydown实现,但是这存在着一些不好的用户体验.比如onchange事件只在键盘或者鼠标操作改变对象属性,且失去焦点时触发,脚本触发无效:而onkeydown/onkeypress/onkeyup在处理复制.粘贴.拖拽.长按键(按住键盘不放)等细节上并不完善. onpropertychange属性可

总结oninput、onchange与onpropertychange事件的使用方法和差别

前端页面开发的非常多情况下都须要实时监听文本框输入,比方腾讯微博编写140字的微博时输入框hu9i动态显示还能够输入的字数. 过去一般都使用onchange/onkeyup/onkeypress/onkeydown实现,可是这存在着一些不好的用户体验. 比方onchange事件仅仅在键盘或者鼠标操作改变对象属性,且失去焦点时触发,脚本触发无效:而onkeydown/onkeypress/onkeyup在处理复制.粘贴.拖拽.长按键(按住键盘不放)等细节上并不完好. onpropertychang