JS实时监听输入框中的内容

有时候我们需要实时监听输入框中值得变化，这里得实时监听是指当我们获取到输入框焦点，并在其中键入字符的时候，我们可以监听到当每次键入字符后，获取输入框中的内容。

当在输入框中每次输入一个字符，箭头指向的内容显示区域都会实时显示键入字符后输入框中的内容。

具体实现方式是：给输入框input绑定onpropertychange和oninput 事件。

       1.onpropertychange，只要当前对象属性发生改变，都会触发事件，但是它是IE专属的；

       2.oninput是onpropertychange的非IE浏览器版本，支持firefox和opera等浏览器，但有一点不同，它绑定于对象时，并非该对象所有属性改变都能触发事件，它只在对象value值发生改变时奏效。

具体代码如下：
<input id="viewName" type="text" name="viewName" >
<div id="showInputValue" style="padding: 10px;overflow:auto;line-height: 30px;font-size: 18px;">
    <span id="test"></span>
</div>

$("#viewName").bind("input propertychang",function(event){
    var viewName = this.value;
    viewName = $.trim(viewName);
    this.value = viewName;
    
    if(viewName.length == 0){
        layer.tips("名称不能为空！",this,{tips:[1,"#FF5722"]});
        return ;
    }
    
    $("#test").html(viewName.toUpperCase());
});

原文地址：https://blog.csdn.net/cccmercy/article/details/79049389