js实时获取文本框内容（杂项笔记）

玻璃瓶和纸飞机

已于 2024-03-29 17:28:04 修改

阅读量2.8k

点赞数 4

分类专栏：前端文章标签： javascript 笔记开发语言

于 2021-01-26 14:41:00 首次发布

本文链接：https://blog.csdn.net/weixin_44376552/article/details/113179412

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

js实时获取文本框内容（简便方法）

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

演示结果如下：
在这里插入图片描述

源码如下

<!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>

玻璃瓶和纸飞机

关注

4
点赞
踩
11

收藏

觉得还不错? 一键收藏
打赏
1
评论
js实时获取文本框内容（杂项笔记）

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

扫一扫