Question

可能重复：
What is the best way to emulate an HTML input “maxlength” attribute on an HTML textarea?

我的问题是，<textarea >只能配置为接受一定数量的字符吗？我可以在以下JavaScript中执行此操作，但我正在为此设计此页面的人员不需要状态字段。

我目前的做事方式是我有一个<textarea >，它是一个表单的一部分，它使用一个很好的JavaScript函数来填充状态框中的消息。

我也读过SO并发现警报和声音确实不是提醒人们的方式，因此以下代码会在出现错误时更改背景颜色（并在适当时恢复）。

以下是代码：

// Checks Form element TransDesc for overruns past 255 characters.
function warnOverDescLen()
{
  var misc_text  = 
  document.forms["InvGenPayTickets"]["TransDesc"].value;
  var alert_text = 
  "You cannot enter more than 255 characters. Please remove some information.";

  var rc = true;

  if(255 < misc_text.length)
  {
    document.forms["InvGenPayTickets"]["trans_status"].value 
      = alert_text;

    misc_text = misc_text.substring(0, 253);

    document.forms["InvGenPayTickets"]["TransDesc"].value 
      = misc_text;

    document.forms["InvGenPayTickets"]["trans_status"].style.backgroundColor 
      = "pink";
  }
  else
  {
    document.forms["InvGenPayTickets"]["trans_status"].value 
      = "";
    document.forms["InvGenPayTickets"]["trans_status"].style.backgroundColor 
      = "lightgoldenrodyellow";
  }

  return rc;
}

<textarea rows="4" cols="60" name="TransDesc" id="TransDesc" 
onkeypress="return warnOverDescLen();" ></textarea>

<span style="color: #50081E; font-weight: bold">Status</span>
<br />
<input type=text name="trans_status" id="trans_status" maxwidth="50"
size="65" />

Answer 1

这是HTML5的解决方案，IE9或更早版本不支持（根据this）：

<textarea maxlength="255"></textarea>

由于您可能无法放弃对IE9（甚至可能是IE8）的支持，因此建议您将其与JavaScript结合使用，以防止textarea上的keydown和paste事件的默认行为，作为立场75建议。

以下是使用纯JavaScript的方法：

<textarea id="txtarea" maxlength="255"></textarea>
<script>
var field = document.getElementById('txtarea');
if(field.addEventListener) {
    field.addEventListener('keydown', enforceMaxlength);
    field.addEventListener('paste', enforceMaxlength);
} else {
    // IE6-8
    field.attachEvent('onkeydown', enforceMaxlength);
    field.attachEvent('onpaste', enforceMaxlength);
}

function enforceMaxlength(evt) {
   var maxLength = 255;
    if(this.value.length >= maxLength) {
        evt.preventDefault()
    }
}
</script>

http://jsfiddle.net/snJwn/

Answer 2

HTML5提供maxLength属性。否则，你需要一些javascript，在jQuery中，你会做类似的事情

maxLength = 50;
$("textarea").on("keydown paste", function(e){
  if ($(this).val().length>=maxLength) e.preventDefault();
});

Answer 3

您可以使用maxlength="255"（它指定元素中允许的最大字符数。）

或者您也可以通过jquery here找到教程

HTML

<textarea cols="30" rows="5" maxlength="10"></textarea>

jquery

jQuery(function($) {

  // ignore these keys
  var ignore = [8,9,13,33,34,35,36,37,38,39,40,46];

  // use keypress instead of keydown as that's the only
  // place keystrokes could be canceled in Opera
  var eventName = 'keypress';

  // handle textareas with maxlength attribute
  $('textarea[maxlength]')

    // this is where the magic happens
    .live(eventName, function(event) {
      var self = $(this),
          maxlength = self.attr('maxlength'),
          code = $.data(this, 'keycode');

      // check if maxlength has a value.
      // The value must be greater than 0
      if (maxlength && maxlength > 0) {

        // continue with this keystroke if maxlength
        // not reached or one of the ignored keys were pressed.
        return ( self.val().length < maxlength
                 || $.inArray(code, ignore) !== -1 );

      }
    })

    // store keyCode from keydown event for later use
    .live('keydown', function(event) {
      $.data(this, 'keycode', event.keyCode || event.which);
    });

});

Live example

可以输入限制为html <textarea>？</textarea>

3 个答案: