<html> <head> <title>Title</title> </head> <body οndblclick="inp2()"> <textarea rows="6" cols="30" οnkeyup="test1(this)"></textarea> <span id="c">0</span>/100 <input id="inp" type="button" value="解禁文本域"> <script> function test1(thiz){ let a=thiz.value; let b=a.length; if(b<=100){ document.getElementById("c").innerText=b; }else { thiz.disabled="disabled"; } } let c=document.getElementById("inp"); c.οnclick=function (){ window.location.reload(); } function inp2(){ window.location.reload(); } </script> </body> </html>
上面这些代码分起来看还行,一旦组合起来,就让人有点头晕了!它实现的效果如下:
一直输入数字,输入的数字个数到100个时会限制输入,单机解禁文本域或者双击其它位置,可以解除限制(其实就是刷新浏览器)。
下面让我们仔细分析下代码:
绿色部分主要用到<textarea>,它是文本域,就是上图的样式,οnkeyup="test1(this)是键盘的放开事件,当键盘放开,值就会响应,下面绿色的部分就是调用test1(this)的方法,应为是下面的thiz是形参,注意:形参和实参不能一致,调用方法获取长度,进行判断到蓝色部分,通过上面设定的id值c,将长度值b赋值给0的位置,随之改变。黄色部分是通过调用id值inp获取返回值c,给c一个单击事件(onclick),再加上单击后的功能是刷新浏览器(window.location.reload();)紫色部分是给双击事件(ondblclick)的值inp2(),设定一个功能方法,也是刷新浏览器。难倒是不难,重要的是要把自己的思维逻辑理清!