发布---文本域内容-CFANZ编程社区

发布---文本域内容

<body>
    <textarea id="are"></textarea>
    <button>发布</button>
    <ul></ul>
    <script>
        const are = document.querySelector('#are')
        const ul = document.querySelector('ul')
        const but = document.querySelector('button');
        but.addEventListener('click',function(){
            //创建li标签
            const li =document.createElement('li')
            // console.log(li);

            //去除li标签自己的小圆点
            li.style.listStyle='none'

            //获取到文本域内容 赋值到li标签上
            li.innerText =are.value
            
            //把li标签插入到ul中
            ul.appendChild(li)

            //发布之后清空文本域内容  无残留
            are.value=''
        })

        //给文本域 绑定点击事件 键盘按下后 也去执行鼠标的点击发布功能
        //要判断按下的是否为回车键
        are.addEventListener('keydown',function(event){
            
            if(event.key==='Enter'){
                // console.log('回车发布成功');
                but.click();   //相当于点击了一下按钮
            }
        })
        
    </script>
</body>
0 条评论