Question

我知道HTML有一个maxlength属性，但我想限制输入的字的数量。

10个单词后，用户应该能够将光标向左移动。编辑文本，但不再添加任何单词。

那我怎么能停止光标？

有什么建议吗？

只有javascript请。

Answer 1

（问题并不完全清楚......我认为这意味着“如何防止用户在textarea中输入超过10个单词？”）

我认为你很难实现这一目标。例如，粘贴怎么样？

这是一个替代建议，可能适合您正在做的事情：现代UI（例如Twitter）处理此问题的一种方法是设置字母数或字数，一旦你'变成红色已超过极限。如果您尝试提交表单，则会出现错误。这比试图阻止用户首先输入十个以上的单词要容易得多。

Answer 2

这并不涵盖所有可能的用户操作，但我感到无聊，也许你会学到一些东西：

HTML：

<textarea id="input_box"></textarea>

JavaScript的：

function check_words(e) {
    var BACKSPACE  = 8;
    var DELETE     = 46;
    var MAX_WORDS  = 10;
    var valid_keys = [BACKSPACE, DELETE];
    var words      = this.value.split(' ');

    if (words.length >= MAX_WORDS && valid_keys.indexOf(e.keyCode) == -1) {
        e.preventDefault();
        words.length = MAX_WORDS;
        this.value = words.join(' ');
    }
}

var textarea = document.getElementById('input_box');
textarea.addEventListener('keydown', check_words);
textarea.addEventListener('keyup', check_words);

在JS Bin上试试：http://jsbin.com/isikim/2/edit

如果textarea中有10个字，用户按下某个键，则不会发生任何事情。
如果用户尝试复制并粘贴大量文本，textarea的内容将立即被删除至10个字。

实际上，我不确定这是不是很完美。由于JavaScript在客户端上运行，因此您只需要一些适合普通用户的东西。恶意用户总是可以使用您的JavaScript;没办法解决这个问题。只要您在服务器上进行真正的卫生，就应该没有问题。

Answer 3

HTML5验证适用于以下任务：

<input 
  pattern="([\w]+\s?){0,5}" 
  onkeypress="if(!this.validity.valid){this.value=this.value.slice(0,-1);return false;}"/>

如果要提交，您可以省略onkeypress处理程序，因为如果某些内容无效，表单将不会提交。

可以使用poly-fills来支持使用这种语法的旧浏览器。

Answer 4

和@sgroves一样，这个答案只是为了好玩：）

$(document).ready(function(){

  $('textarea').on('keydown', function(e){
    // ignore backspaces
    if(e.keyCode == 8)
      return;

    var that = $(this);
    // we only need to check total words on spacebar (i.e the end of a word)
    if(e.keyCode == 32){
      setTimeout(function(){ // timeout so we get textarea value on keydown
        var string = that.val();
        // remove multiple spaces and trailing space
        string = string.replace(/ +(?= )| $/g,'');
        var words = string.split(' ');
        if(words.length == 10){
          that.val(words.join(' '));
        }
      }, 1);
    }
  });
});

Answer 5

最近遇到了类似的问题...这是我的看法

请参见下面和codepen.io上的演示：

header('Location: indexm.php');

import matplotlib.pyplot as plt; plt.rcdefaults()
import numpy as np
import matplotlib.pyplot as plt

objects = ('A', 'B', 'C', 'D', 'E', 'F', 'G')
y_pos = np.arange(len(objects))
performance = [15.3, 25.8, 37.1, 50.0, 15.0, 18.5, 28.9]
plt.bar(y_pos, performance, align='center', alpha=0.5)
plt.xticks(y_pos, objects)
plt.ylabel('Reduction Error')
plt.title("")

plt.show()

Javascript textarea字数限制

5 个答案: