js实时获取文本框内容

js实时获取文本框内容(简便方法)

最近在学习微信小程序开发以及JavaScript,看到微信小程序里面可以通过事件绑定来实时获取文本框里的内容。因为暂时还没看vue 的知识,就想先用JavaScript来试试看能不能实现要求。这里犯了一个小毛病,因为前面学习过一些常用的鼠标事件,刚好在复习前面的要点,就在js中用了鼠标事件,这样一来就达不到实时性的要求了。于是就百度了一下,js实时获取文本框内容,发现他们写的都太繁琐了(可以比较严谨吧) 这里博主采用了键盘事件(快捷)来实时获取文本内容。

演示结果如下:
js实时获取文本框内容_第1张图片

源码如下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>
        <input type="text" class="text">
        <div class="div"></div>
    </div>
    <script>
        var text = document.querySelector(".text");
        var div = document.querySelector(".div")
        text.addEventListener("keyup", function(e) {

            div.innerHTML = text.value;

        })
    </script>
</body>

</html>

你可能感兴趣的:(前端)