Input输入框数据单向绑定

最新推荐文章于 2023-05-31 00:28:54 发布

梵法利亚

最新推荐文章于 2023-05-31 00:28:54 发布

阅读量3.2k

点赞数 1

分类专栏：前端知识

本文链接：https://blog.csdn.net/wg22222222/article/details/92375680

版权

前端知识专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Input输入框数据单向绑定

功能场景：在Input输入数据，同步显示式在启动控件中。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>

<body>
        <div id="form">
            <p><input name="one" type="text" id="text1" /></p>
            <p><input name="one" type="text" id="text2"/></p>
            <p><input name="one" type="text" id="text3"/></p>
            <p><input name="one" type="text" id="text4"/></p>
            <p><input name="one" type="text" id="text5"/></p>
            <p><input name="one" type="text" id="text6"/></p>
            <p><input name="one" type="text" id="text7"/></p>
            <p><input name="one" type="text" id="text8"/></p>
        </div>
你是输入的字符为: <div id='d1'></div>
        <script type="text/javascript">



//            var form=document.getElementById("form");
//            form.addEventListener(form,"input",function(e){
 //              console.log(e);
	
	var stest = document.getElementById("form").getElementsByTagName("input").length;
  var div = document.getElementById('d1');
	for(var i=0; i<8; i++){


		var inputid = document.getElementById("form").getElementsByTagName("input")[i].id;

                   document.getElementById(inputid).addEventListener("input", myFunction);

function myFunction() {
    alert("input 输入框值已发生变化。");
    
}
//		$("#"+inputid+"").bind("input propertychange",function(event){
//     			  console.log($("#"+inputid+"").val())
//		});
		
//			inputid.oninput = function(){
//				div.innerHTML = input.value;
//				 console.log(inputid.value);
//			}
	}

	
        </script>
    </body>

</html>