请帮忙检查一下,谢谢

请帮忙检查一下,谢谢

<!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 span = document.getElementsByTagName('span')[0];

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

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

var total = 30;

text.onkeypress = function(){

    var num = total-this.value.length-1;

    if(num > 0){

        b.innerHTML = num;

    }else{

        span.innerHTML = '您已超出'+Math.abs(num)+"字";

    }

    

}

</script>

</body>

</html>


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

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

1回答
好帮手慕糖 2019-12-07 18:19:56

同学你好,代码中的问题如下:

1、onkeypress为键盘按下事件,当输入第一个字时,按下键盘,但是这时文本框中还没有文字,所以数字不更新,当第二次按下的时候,进行计算,这时文本框中正好,有第一次输入的数字,减去一是可以的。但是建议这里使用鼠标抬起事件onkeyup,就不需要减去1了,例:

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

2、超出之后,再删除的话,提示回不到还可以输入的提示。如下:

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

这是因为改变了结构,改变了html的结构,超出之后,就没有b这个元素,不能直接赋值,建议:输入的也可以对span赋值,例:

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

如果我的回答帮助了你,欢迎采纳,祝学习愉快~

问题已解决,确定采纳
还有疑问,暂不采纳

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

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

0 星
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

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