文本框内容随着其他文本框的变化
分类:实例代码
本章节分享一段代码实例,它实现了文本框的内容能够跟随其他文本内容改变而改变。
代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style> ul li{ list-style:none; margin:5px; } </style> <script> window.onload = function () { var top = document.getElementById("top"); var bottom = document.getElementById("bottom"); top.onkeyup = function () { bottom.value = top.value; } } </script> </head> <body> <ul> <li><input type="text" id="top"/></li> <li><input type="text" id="bottom"/></li> </ul> </body> </html>
上面的代码实现了我们的要求,下面介绍一下它的实现过程。
一.代码注释:
(1).window.onload = function () {},当文档内容完全加载完毕再去执行函数中的代码。
(2).var top = document.getElementById("top"),获取指定id的元素对象。
(3).top.onkeyup = function () {
bottom.value = top.value;
},为元素注册onkeyup事件处理函数。
将当前元素的value值赋值给bottom元素。
二.相关阅读:
(1).document.getElementById()可以参阅document.getElementById()方法一章节。
(2).onkeyup事件可以参阅javascript keyup事件一章节。
文本框内容随着其他文本框的变化,这样的场景在实际项目中还是用的比较多的,关于文本框内容随着其他文本框的变化就介绍到这了。
文本框内容随着其他文本框的变化属于前端实例代码,有关更多实例代码大家可以查看。