如何实现在文本框中按下Enter键就创建一个li标签？

最新推荐文章于 2023-03-01 11:54:00 发布

小丸子23333

最新推荐文章于 2023-03-01 11:54:00 发布

阅读量303

点赞数 1

文章标签：前端 javascript

本文链接：https://blog.csdn.net/ITQING677/article/details/128039311

版权

如何实现文本框中按下Enter键就创建一个li标签？
之前写过一个留言板，里面是点击提交按钮才会创建一个li标签，就在想如何实现按下enter键就可以创建一个li呢?
问题进行拆分：
如何实现文本框中按下Enter键触发事件？
触发submit事件？
如何给JS的"submit"事件绑定一个处理函数，触发元素上的该事件？

首先，提交表单的2种方式：
1：点击或
2：在 input 字段中按下 Enter 键
两种行为都会触发表单的submit事件。

现在知道了在文本框中按enter键可以直接触发submit事件，直接给submit添加监听事件就好了。

完整代码：

<!DOCTYPE html>
<html>
    <head>
         <meta charset="UTF-8">
         <title>留言板</title>
         <style>
             ul li{
                 background-color: pink ;
                 margin: 10px;
                 text-align: left;
             }
         </style>
    </head>
    <body>
        <form>
            <input type="text" id="inputtext" placeholder="请输入内容：">
        </form>
        <ul></ul>

        <script>
            window.onload=function(){
               //1。获取元素
               var forms =document.querySelector('form');
               var texts = document.getElementById('inputtext');
               var ul =document.querySelector('ul');

               //2。注册事件
               forms.addEventListener('submit',(e)=>{
                    e.preventDefault();
                    var li = document.createElement('li');
                    ul.appendChild(li);
                    li.innerText=texts.value;
               })
           }
        </script>
    </body>
</html>

小丸子23333

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
如何实现在文本框中按下Enter键就创建一个li标签？

如何实现文本框中按下Enter键就创建一个li标签？之前写过一个留言板，里面是点击提交按钮才会创建一个li标签，就在想如何实现按下enter键就可以创建一个li呢?问题进行拆分：如何实现文本框中按下Enter键触发事件？触发submit事件？如何给JS的"submit"事件绑定一个处理函数，触发元素上的该事件？首先，提交表单的2种方式：1：点击或 **2：在 input 字段中按下 Enter 键**
复制链接

扫一扫