Javascript textarea字数限制

时间:2013-06-05 20:35:08

标签: javascript

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

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

那我怎么能停止光标?

有什么建议吗?

只有javascript请。

5 个答案:

答案 0 :(得分:0)

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

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

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

答案 1 :(得分:0)

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

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;没办法解决这个问题。只要您在服务器上进行真正的卫生,就应该没有问题。

答案 2 :(得分:0)

HTML5验证适用于以下任务:

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

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

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

答案 3 :(得分:0)

和@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);
    }
  });
});

答案 4 :(得分:0)

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

请参见下面和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()