js中常用表单事件及控制文本框中还能输入多少字

最新推荐文章于 2020-12-20 07:13:20 发布

哼,小呀么小胖子

最新推荐文章于 2020-12-20 07:13:20 发布

阅读量199

点赞数

分类专栏：前端面试题总结

本文链接：https://blog.csdn.net/qq_43412333/article/details/102548167

版权

前端面试题总结专栏收录该内容

45 篇文章 0 订阅

订阅专栏

onfocus 文本框聚焦
onblur 文本框失焦(文本框先聚焦再失焦时触发)
onchange 前后两次文本框内容发生变化,中间的输入对其不造成影响,一次触发(失焦状态)
oninput 文本框输入内容发生变化,多次触发(聚焦状态)

控制文本框中还能输入多少字的最终样式
在这里插入图片描述
代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>14练习1_控制文本框输入</title>
</head>

<body>
  <!-- maxlength="5" -->
  <input id="txt"></input>
  <span>您还可以输入<span id="shownum">10</span>个字</span>
</body>
<script>
  var oTxt = document.querySelector('#txt');
  var oShowNum = document.querySelector('#shownum');
  //文本框输入内容发生变化时触发
  oTxt.oninput = function () {
    //获取输入的字符串
    var value = this.value;
    //得到还能输入的字符串的长度
    var len = 10 - value.length;
    //如果输入的长度大于0
    if (len <= 0) {
      //让其显示可输入的还剩0
      len = 0;
      //截取所输入字符串的前10个字母
      this.value = value.substring(0, 10); 
    }
    oShowNum.innerText = len;
  }
</script>
</html>

哼,小呀么小胖子

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js中常用表单事件及控制文本框中还能输入多少字

onfocus 文本框聚焦onblur 文本框失焦(文本框先聚焦再失焦时触发)onchange 前后两次文本框内容发生变化,中间的输入对其不造成影响,一次触发(失焦状态)oninput 文本框输入内容发生变化,多次触发(聚焦状态)控制文本框中还能输入多少字的最终样式代码:<!DOCTYPE html><html lang="en"><h...
复制链接

扫一扫