原生js实现简单微博发布功能Dom(节点操作)

这篇博客介绍了如何使用原生JavaScript实现简单的微博发布功能,包括发布前的标题和内容验证,发布与删除操作,以及文本域字数限制的处理。在字数限制方面,通过oninput事件实时监测并处理超出字数的情况。
摘要由CSDN通过智能技术生成
    现在很多人都在用微博,微博成为一种很普遍的分享,交流平台,以至于养成了每天睁开眼睛第一件事情和每天晚上闭上眼睛之前最后一件事就是要刷微博。博主一般就是潜水,默默的刷别人的微博,以至于到现在我的粉丝依旧是9个,特别稳定~~搞得本宝宝很焦灼...(有想要关注我的,可以私信哦~嘻嘻)
    好啦,废话不多说,进入正题。。

这里写图片描述

(只是实现简单的节点操作,做的不好勿喷~~~)

这个简单的功能主要分为三大部分:
第一部分:实现发布前的验证,只有标题和内容同时不为空时,才能发布成功。
这一部分较为简单,验证函数如下:

function text(){
            if(title.value == null || title.value == ''){
                alert('请输入标题');
                return false;
            }else if(content.value == null || content.value == ''){
                alert(content.value);
                alert('请输入发布内容');
                return false;
            }else {
                return true;
            }
        }

第二部分是发布和删除功能。

用户点击发布之后,创建新的节点,并且将标题和内容的值赋给新节点,并将节点插入。
用户点击删除按钮之后,将点击的该span 传给删除函数,直接删除这个元素的整个父节点 li

第三部分 是 微博内容的文本域的字数判定:

因为我们要在用户每输入一个字之后就要判断一次,所以一开始的我打算给textarea添加一个onchange事件,但是添加之后才发现,,文本域只有在失去焦点之后才后触发onchange事件,所以,此路不通,只能另换方法。后来,我便改用了oninput事件,这个问题变迎刃而解啦~~后来听别人说,用键盘事件可是可以滴,毕竟我们打字是需要按键盘的嘛~

在判断字数的这个地方,还有一个小bug,就是如果我们一下复制粘贴好多文字的时候,他虽然会弹出警示框提醒超出上限,但是仍然会把文字输入进文本域。就在我冥思苦想解决这个问题的时候,大神告诉我可以设置一个全局变量,在每一次oninput的最后,把现在文本域中的内容储存起来,如果下次输入的时候,超出字数,就把输入框文字重置为上一次的内容。。旁边坐一个大神的好处就是有啥问题,大神分分钟就给解决了,同样,坏处就是,大神一语惊醒梦中人,自己就省事了,,少走了很多弯路,我觉得,对于我这样的小白白,,还是要多走点弯路好~

突然发现这一段文字好多,身为处女座的我感觉很不舒服,我们来放代码~

<
  • 1
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值