微信朋友圈“空”消息的H5模拟 / 四六文摘

昨天和大家简单介绍了微信朋友圈空信息的原因后，不少朋友都在问如果在H5中出现这个问题怎么办，或者如果这样回来带什么问题，于是就有了本篇文章。

注意本篇文章为“硬核”内容，云层一本正经的写代码。

为了方便这里首先先把HTML代码放出

<!DOCTYPE html><html lang="cn"><head> <meta charset="UTF-8"> <title>WX朋友圈信息BUG原理演示</title></head><body><script> function checkinput() { if(window.name == "") { document.getElementById("message").value=""; window.name="modify"; } var1=document.getElementById("message").value; if(var1.trim().length==0) document.getElementById("button").disabled=true; else document.getElementById("button").disabled=false; }</script><form id="form1" action="/api" method="POST" > <input type="button" id="button" value="发表" style="font-size: 30px;left: 30px;top: 0;"><br> <textarea cols="40" rows="5" id="message" name="message" onkeypress="checkinput()">这一刻的想法...</textarea> </form></body></html>

将这个代码保存为html后缀文件，用浏览器打开即可看到下面的效果

接着试试点击文本框，然后删掉所有内容（发表按钮变灰）

接着添加两个空格，会发现按钮发表还是灰色，如果添加别的内容就能看到按钮正常使用。

接着解释一下代码及工作原理

基于onkeyup的事件触发，调用checkinput函数

<textarea cols="40" rows="5" id="message" name="message" onkeypress="checkinput()">这一刻的想法...</textarea>

点击文本框输入内容先清空默认提示信息，为了避免再次输入的时候继续清空，所以修改了window.name的值。

if(window.name == "") { document.getElementById("message").value=""; window.name="modify"; }

获取文本框的值，然后去空格检查长度是否是零，如果是零则让按钮不可用，否则让按钮可用。

var1=document.getElementById("message").value; if(var1.trim().length==0) document.getElementById("button").disabled=true; else document.getElementById("button").disabled=false; }

好了基本代码这里写完了，这里对关键几个知识点做个说明

//如何确保页面第一次打开，window.name属性第一次打开页面为空window.name == ""//如何通过js获取一个文本框的值，这里需要文本框有ID属性document.getElementById("message").value//如何修改一个按钮为灰色不可用document.getElementById("button").disabled=true//如何判断一个文本框内容是否为空,trim()函数去空格，length拿字符串长度var1.trim().length==0

代码到这里，是不是就出现了不能提交空内容的情况了！

介绍下常见的浏览器客户端的两个小办法

A.和微信的朋友圈问题类似，不触发checkinput()函数

按F12打开Chrome浏览器开发工具，在下面的Console内输入代码

document.getElementById("message").value=""

然后敲下回车