onchange，onpropertychange，oninput键盘输入和js赋值时区别,以及输入密码时显示的是星号

最新推荐文章于 2021-09-14 11:02:13 发布

Z.ain

最新推荐文章于 2021-09-14 11:02:13 发布

阅读量1.6k

点赞数

分类专栏： javascript和juery脚本

本文链接：https://blog.csdn.net/a631464421/article/details/9090763

版权

javascript和juery脚本专栏收录该内容

5 篇文章 0 订阅

订阅专栏

最近项目中需要用到文本框中值改变时触发某个事件，第一反应就是onchange事件，但是测试发现如果是用js赋值的话，是不会触发onchange事件的，后来在网上找了一下，都说是在ie浏览器中可以用onpropertychange事件，在火狐中使用oninput事件。说是这两个事件是一个效果，很多人没测试就在那转载。哎……

接下来我把测试过的跟大家分享下。

onchange事件是在键盘输入，失去焦点时候如果值改变（ie和火狐效果一样）。

onchange事件用js赋值时不会触发。

在ie浏览器中（本人是ie8，别的ie版本没测试）。

onpropertychange只要值改变都会触发，无论是键盘输入还是js赋值改变都会触发

oninput在ie中无效。

在火狐浏览器中

onpropertychange在火狐中无效。

oninput键盘输入时，只要值改变就触发（不管是否已经失去焦点），onchange是失去焦点时才会触发。

oninput事件js赋值是不会触发该事件的

文采不行，大家将就看，能理解意思就行。

接下来把测试代码分享给大家。

<input type="text" οnchange="testChange();" /><input type="text" onpropertychange="testOnpropertychange();"/><input type="text" οninput="testOninput();"/><input type="button" value="改变文本框值" οnclick="changeText();">



 

 
function testChange(){alert('cnange');}function testOnpropertychange(){alert('onpropertychange');}function testOninput(){alert('oninput');}function changeText(){document.getElementById("test1").value='文本框值已经改变';document.getElementById("test2").value='文本框值已经改变';document.getElementById("test3").value='文本框值已经改变';}
 
 <script type="text/javascript">
        var realValue;
        function change(value) {
            var length = value.length;
            realValue = value;
          
           
            document.getElementById("password").value = "";
            
            for (var i = 0; i < length; i++) {
                document.getElementById("password").value += "*";
            }

        }
        function att() {
            document.getElementById("tt").value = realValue;
        }

    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
       <table>
       <tr>
       <td>用户名:</td>
       <td><asp:TextBox ID="txtyong" runat="server"></asp:TextBox>    </td>
     
       </tr>
       <tr>
          <td>密码:</td>
       <td><input type="text" id="password" runat="server" οnkeyup="change(this.value)" /></td>
       <td><input type="button" runat="server"  id="tt" οnclick="att()"/></td>
       </tr>
       <tr>
       <td>
           <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
           </td>
       </tr>
       </table>
    </div>
    </form>
</body>
</html>


<input type="text" οnchange="testChange();" /><input type="text" onpropertychange="testOnpropertychange();"/><input type="text" οninput="testOninput();"/><input type="button" value="改变文本框值" οnclick="changeText();">

function testChange(){alert('cnange');}function testOnpropertychange(){alert('onpropertychange');}function testOninput(){alert('oninput');}function changeText(){document.getElementById("test1").value='文本框值已经改变';document.getElementById("test2").value='文本框值已经改变';document.getElementById("test3").value='文本框值已经改变';}
 
 <script type="text/javascript">
        var realValue;
        function change(value) {
            var length = value.length;
            realValue = value;
            document.getElementById("password").value = "";
            
            for (var i = 0; i < length; i++) {
                document.getElementById("password").value += "*";
            }

        }
        function att() {
            document.getElementById("tt").value = realValue;
        }

    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
       <table>
       <tr>
       <td>用户名:</td>
       <td><asp:TextBox ID="txtyong" runat="server"></asp:TextBox>    </td>
     
       </tr>
       <tr>
          <td>密码:</td>
       <td><input type="text" id="password" runat="server" οnkeyup="change(this.value)" /></td>
       <td><input type="button" runat="server"  id="tt" οnclick="att()"/></td>
       </tr>
       <tr>
       <td>
           <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
           </td>
       </tr>
       </table>
    </div>
    </form>
</body>
</html>

<pre class="javascript" name="code">

Z.ain

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
onchange，onpropertychange，oninput键盘输入和js赋值时区别,以及输入密码时显示的是星号

最近项目中需要用到文本框中值改变时触发某个事件，第一反应就是onchange事件，但是测试发现如果是用js赋值的话，是不会触发onchange事件的，后来在网上找了一下，都说是在ie浏览器中可以用onpropertychange事件，在火狐中使用oninput事件。说是这两个事件是一个效果，很多人没测试就在那转载。哎……接下来我把测试过的跟大家分享下。onchange事件是在键盘输入，失去
复制链接

扫一扫