js 输入框显示你还可以输入多少字

我们在实际web前端开发过程中经常需要对文本进行限制。

我们如何用js提示用户还需要输入多少个文字呢?这样可以提高用户体验。

完整代码如下:

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>js textarea输入框显示你还可以输入多少字 xinbiancheng.cn</title>
  <style>
  </style>
</head>
<body>
  <span id="prompt">你还可以输入<strong>50</strong>个字!</span><br /><br />
  <textarea id="inputtext" style="width:500px; height:300px;"></textarea>
</body>
<script>
  window.onload = function () { // 说明1
    var prompt = document.getElementById("prompt");   // 说明2
    var inputtext = document.getElementById("inputtext"); // 说明3
    var total = 50;
    inputtext.oninput = function () {   // 说明4
      var len = total - this.value.length; // 说明5
      if (len >= 0) {
        prompt.innerHTML = "你还可以输入<strong>" + len + "</strong>个字!"; // 说明6
      } else {//超出
        prompt.innerHTML = "你已超出<strong style='color:red;'>" + Math.abs(len) + "</strong>个字!";  // 说明7
      }
    };
  };
</script>
</html>

代码分析如下:

当我们打开html网页时,程序从上向下执行,在网页完全加载所有内容(包括img图像,js文件,CSS文件等),程序开始执行window.onload事件。

第一步,获取标签元素

var prompt = document.getElementById("prompt");   // 获取提示信息元素
var inputtext = document.getElementById("inputtext"); // 获取输入元素

第二步,绑定事件

当我们想获得<input><textarea>用户输入内容时,就会触发oninput事件,因此我们需要绑定oninput事件。

即是:

inputtext.oninput = function () {
}

第三步,内容逻辑处理

var len = total - this.value.length;  //总长度-当前输入内容的长度,就是剩下的长度

通过prompt.innerHTML,把提示信息显示给用户。

如果输入内容超过了总长度,将会以负数的形式显示,这样用户体验不是很好,通过Math.abs()方法取绝对值,使其变成正整数。

分析完毕