javascript - 达到限制后使数字变量不可变

标签 javascript

一旦达到给定数量的单词或字符(不包括空格),我试图限制表单字段中文本框的长度。

我遇到的麻烦是,一旦达到上限,我无法弄清楚如何限制子字符串最大长度变量。

我使用 Callable.js ( https://sacha.me/Countable/docs/ ) 作为计数器脚本。

var wordL = 3;
    var charL = 18;
    var boxid = 'descr';
    var area = document.getElementById(boxid);
    function fixlength(boxid,wordlimit,charlimit,wordcount,charcount,allcount) {
            if (charcount > charlimit || wordcount > wordlimit) {
                    /******************************
                    * The following line contains the problematic dynamic variable
                    *******************************/
                    area.value = area.value.substring(0, all);                                                                 
            }
    }
    function callback (counter) {
      console.log(counter);
      document.getElementById("wordsleft").innerHTML = wordL - counter.words;
      document.getElementById("charsleft").innerHTML = charL - counter.characters;
      fixlength(boxid,wordL,charL,counter.words,counter.characters,counter.all);
    }
    Countable.live(area, callback);
<script src="https://raw.githubusercontent.com/RadLikeWhoa/Countable/master/Countable.js"></script>
<!DOCTYPE HTML>
<html>
 <head>
  <title>Test</title>
 </head>
 <body>
  Words:<span id="wordsleft"></span> Chars:<span id="charsleft"></span>
   <form>
     <textarea id="descr" name"descr"></textarea>
     </form>
 </body>
</html>

最佳答案

我怀疑一旦达到限制,您需要阻止该文本区域接受用户输入。如果我是对的,您应该将 onKeyPress 事件监听器附加到该文本区域,一旦超出该限制,您应该返回 false。返回 false 意味着停止文本区域接受新字符。

  • HTML

    <textarea id="descr" name"descr" onKeyPress="return keyPressHandler()" ></textarea>
    
  • JavaScript

    function keyPressHandler(){
        if(/* limit is reached */){
            return false;
        }
    }
    

演示:

function handle(e, event) {
  if (event.keyCode != 8 && e.value.length > 10) {
    return false;
  }
}
<textarea onKeyPress="return handle(this, event)"></textarea>

关于javascript - 达到限制后使数字变量不可变,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35875432/

相关文章:

javascript - 我很难弄清楚如何动态设置时间线

javascript - 在 THREE.js 中查看 Material 的编译着色器代码?

javascript - 多个id上的jquery选择器

javascript - 如何将多个数组添加到剑道图表

javascript - 在 JS 中获取过滤后的对象数组的最大值

javascript - JQuery 滚动列表框模仿与键盘导航?

javascript - 这个 for 循环有什么作用?

javascript - Ace 代码编辑器在单击时消失

javascript - 如何编写一个简单的音乐播放器?

javascript - 寄出后 express 收不到