javascript微博发布案例（附详细代码）

思路：

需求1：检测用户输入的字数

• 注册input事件
• 将输入文本长度赋值给对应的数值

需求2：输入不能为空

• 点击按钮之后判断 如果输入为空，则提示不能输入为空，并直接return
• 为了防止无意义的一些输入 利用字符串.trim()可以去掉首尾空格
• 当输入为空点击发布按钮以后 将输入内容清空 计数器也变为0

需求3 新增留言 应写在点击事件内部

•  创建li 然后里面通过innerHTML追加数据

• 追加给父元素ul ,用父元素.insertBefore(插入到当前元素的前面)

需求4：删除事件必须写在点击事件里面

• 删除事件应该放在追加ul的前面这样创建元素的同时顺便绑定了点击事件
• 删除操作 删除li 父元素.removeChild(子元素)

需求5：重置

• 发布完一条消息后将表单的内容重置为空

---

代码部分（html+js）： 

html代码

    

    

    







    


        

    

    


        0

        /

        140

        发布

    



   


      


      

   

 javascript代码部分

拓展：按下回车键发布信息

这里需要用到事件对象来实现，通过文本输入框的'keyup'(按键弹起)事件的key属性值，来判断当前用户输入键盘的类型，只要event.key === 'Enter'，就调用btn.click()方法，自动触发发布按钮。

注意这里不宜使用keydown属性，使用keydown则会导致文本输入框的内容无法清空，始终有回车键存在于文本输入框内。

textarea.addEventListener('keyup',function(event){
           // 只要 event.key === 'Enter'
           if (event.key === 'Enter'){
             // 回车发布新闻 与点击发布按钮效果等价
              // 回车后 自动触发点击按钮
              btn.click() 
           }       
         })

 

效果图：