zoukankan      html  css  js  c++  java
  • 文本框如何实现限制输入字数效果

    在很多网站都有这样的功能,那就是可以限制在文本框内输入文字的数量,有的是让文字不超过多少字,有的是文字不能少于多少字,原理基本是一样的,下面就介绍一下如何是用JS实现此功能,代码实例如下:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset=" utf-8">
    <meta name="author" content="http://www.51texiao.cn/" />
    <title>蚂蚁部落</title>
    <script type="text/javascript">
    window.onload=function()
    {
      var textarea=document.getElementById("mytext");
      textarea.onkeyup=function()
      {
        checkMax(textarea,10);
      }     
    }
    function checkMax(textarea,maxLength)
    {    
      var str=textarea.value;    
      var strlen=str.length;    
       
      if(strlen>maxLength)
      {    
        alert('字数超过限制');    
        eval(textarea.value=str.substr(0,maxLength));    
      }    
    }    
    </script>
    </head>
    <body style="text-align:center">
    <h1>请在文本框内输入文本测试功能</h1>
    <textarea name="textfield" cols="60" rows="10" id="mytext"></textarea>
    </body>

    </html>

    以上代码实现了限制文字输入数量功能,并且可以将文本框内输入的文本截取至指定的数量。简单介绍一下实现过程:
    一.功能的实现的核心是checkMax()函数,此函数具有两个参数,一个参数是要限制输入文本数量的对象,一个是要限制的数量。
    二checkMax()函数体内功能介绍如下:
    var str=textarea.value;
    获取文本框内的输入值,同时计算出来输入值的长度。下面的if语句用来判断当前输入文本的长度是否超过了指定的限制长度,如果超过会弹出一个警告框,并且通过substr()将超出的部分截取掉。
    三.window.onload=function() {...}的作用是当文档加载完成后才可以执行函数体内的代码,否则,由于代码是顺序执行,会导致 document.getElementById("mytext")无法获取对象。然后为文本框的onkeyup事件绑定事件处理函数。

    后来都会美好的!
  • 相关阅读:
    hadoop-2.7.3安装kafka_2.11-2.1.0
    HBase数据快速导入之ImportTsv&Bulkload
    hbase shell 基本操作
    SQLplus命令中删除键和翻页键不能用的问题
    SQL*Loader 的使用sqlldr和sqluldr2方法详解
    python连接oracle导出数据文件
    python零碎知识点一
    用Python输出一个Fibonacci数列
    问题总结——window平台下gruntower安装后无法运行的问题
    JavaScript学习笔记——浅拷贝、深拷贝
  • 原文地址:https://www.cnblogs.com/momox/p/5090836.html
Copyright © 2011-2022 走看看