请老师批改

请老师批改

<!DOCTYPE html>

<html>

    <head>

    <meta charset="UTF-8">

    <title>输入文本</title>

</head>

<body>

<p>字数限制在30字内,<span>您还可以输入<b>30</b> 字</span></p>

<textarea cols="50"  rows="7"  id="text"></textarea>

<script type="text/javascript">

//补充代码

var b=document.getElementsByTagName("b")[0];

var span=document.getElementsByTagName("span")[0];

var text=document.getElementById("text");

text.onkeypress=function(){

    var len=this.value.length;

    var lened=30;

    if(len>lened){

        b.innerHTML=len-lened;

        span.innerHTML="您已超出"+b.innerHTML;

    }

    else{

        b.innerHTML=lened-len;

       

    }


};

</script>

</body>

</html>


正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

3回答
山河远阔ZZ 2019-02-27 10:26:47

同学你好,onkeypress事件触发的时候,最开始获取的是还没有输入内容的input的长度,所以虽然在input里面写了一个值,但是它获取出来的内容长度还是0;当触发第二次的时候,input里面已经写了一个值,那么获取的是之前在input里面输入的内容的长度,所以每次输入的字符长度比显示的数字都是多一个数字,如下:

http://img1.sycdn.imooc.com//climg/5c75f43f0001373008840322.jpg

http://img1.sycdn.imooc.com//climg/5c75f564000155a004210171.jpg

而onkeyup是,触发了这个事件之后,它获取的长度就是在input里面输入的内容的长度,如下:

http://img1.sycdn.imooc.com//climg/5c75f4990001ea0308390308.jpg

如果帮助到了你,欢迎采纳。

祝学习愉快!

山河远阔ZZ 2019-02-26 09:57:19

同学你好。

从代码效果上看 , 当你敲第一个字符之前 , 文本框里面value长度为0 。

而onkeypress就是当你按下键盘的那一刻触发,在触发的时候获取的len就是0  , 此时 30-len还是30 ,所以看起来没有变化 ,而当你敲第二个字符时 ,此时因为已经存在一个字符 ,长度为1 , 所以30-1会变为29了。

onkeypress必须按下字符键才可以触发 , 功能键是不触发的,onkeyup是键盘释放时触发的。

  • 提问者 qq_命运_szFJMV #1
    额,我一开始以为键盘事件反映的是按键本身的内容,现在才反映过来是按键输出的内容。只有一个疑问为社么onkeypress在触发时获取的num是0而onkeyup是1?
    2019-02-27 00:20:24
山河远阔ZZ 2019-02-24 12:19:39

同学你好,代码中有以下几个问题:

1、当在input边框里输入了内容之后,您还可以输入多少个字符显示错误,如下:

http://img1.sycdn.imooc.com//climg/5c721a580001019505040102.jpg

参考下图:

把onkeypress事件换成onkeyup事件, 当键盘按键被松开时发生;

http://img1.sycdn.imooc.com//climg/5c721a930001aceb03430066.jpg

2、当超过的文字被删除到小于30个字符的时候,提示信息的内容不再发生变化了。

http://img1.sycdn.imooc.com//climg/5c721b020001465603140089.jpg

参考下图:

http://img1.sycdn.imooc.com//climg/5c721b3900010b3106180173.jpg

自己测试下哦,如果帮助到了你,欢迎采纳。

祝学习愉快!

  • 提问者 qq_命运_szFJMV #1
    onkeypress事件和onkeyup事件有什么区别,为什么onkeypress事件在这里运行结果会不准呢?
    2019-02-25 21:55:19
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
前端小白入门系列课程
  • 参与学习           人
  • 提交作业       11218    份
  • 解答问题       36713    个

从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师