Question

我需要满足客户的独特要求。附在此处的是图片 enter image description here

我需要强制用户不要在<textarea>字段的每行输入超过15位数而不留空格。这可能与HTML有关吗？

我想过使用cols属性但是它会像下面所示那样折叠，在第一张图片中没有任何所需的空格。

enter image description here

Answer 1

假设JavaScript是可能的，因为HTML似乎不可能，我建议：

function check() {
    // the trimmed current-value of the <select>
    // 'this' is passed automagically from the
    // addEventListener() method;
    // String.prototype.trim() removes leading and
    // trailing white-space from the value:
    var content = this.value.trim(),

        // splitting that value string into an array
        // using String.prototype.split(); breaking it
        // apart on new-line characters:
        lines = content.split(/\n/),

        // creating a regular expression object to
        // match a simple pattern of any-character
        // except the new-line occurring a minimum
        // of zero, and a maximum of two, times (.{0,2})
        // that is surrounded by the beginning (^) and
        // the end ($) of the string:
        reg = /^.{0,2}$/,

        // using Array.prototype.every() to check
        // that every line in the array matches
        // the regular expression, tested using
        // RegExp.prototype.test(). This method
        // returns a Boolean true (every line 
        // matches the assessment) or false
        // (at least one line does not match):
        test = lines.every(function (line) {
            // the first argument (here: 'line')
            // of the anonymous function is the 
            // current array-element of the array
            // over which we're iterating:
            return reg.test(line);
        });

    // if the string (with leading/trailing white-space
    // removed) has a length (is not zero):
    if (content.length) {

        // ...and test is true:
        if (test) {
            // we use the HTMLElement.classList API
            // to add the 'valid' class-name:
            this.classList.add('valid');

             // and remove the 'invalid' class-name:
            this.classList.remove('invalid');

        // otherwise:
        } else {
            // we do the reverse:
            this.classList.add('invalid');
            this.classList.remove('valid');
        }
    // if the trimmed content has a length of zero:
    } else {
        // we remove both 'invalid' and 'valid' class-names:
        this.classList.remove('invalid','valid');
    }
}

// retrieving the first element of the document
// that matches the supplied CSS selector:
var textarea = document.querySelector('textarea');

// binding the check() function as the 'keyup'
// event-handler:
textarea.addEventListener('keyup', check);

function check() {
  var content = this.value.trim(),
    lines = content.split(/\n/),
    reg = /^.{0,2}$/,
    test = lines.every(function(line) {
      return reg.test(line);
    });
  if (content.length) {
    if (test) {
      this.classList.add('valid');
      this.classList.remove('invalid');
    } else {
      this.classList.add('invalid');
      this.classList.remove('valid');
    }
  } else {
    this.classList.remove('invalid', 'valid');
  }
}

var textarea = document.querySelector('textarea');

textarea.addEventListener('keyup', check);

textarea,
.validity {
  width: 40%;
  margin: 0 0 0.5em 0;
  box-sizing: border-box;
  transition: all 0.5s linear;
}
textarea {
  border: 2px solid #000;
}
textarea.valid {
  border-color: #0f0;
}
textarea.invalid {
  border-color: #f00;
}
span.validity {
  color: #999;
  display: block;
  border-bottom: 2px solid transparent;
}
textarea.invalid + span.validity {
  color: #000;
  border-bottom-color: #f90;
}

<form action="#" method="post">
  <fieldset>
    <textarea title="Each line must have less than three characters."></textarea>
    <span class="validity">Each line must have less than three characters.</span>
  </fieldset>
</form>

JS Fiddle demo，以便于实验/开发。

我意识到这并不是你想要的，但是HTML确实允许pattern属性指定一个正则表达式，用户输入的值应该匹配（因为该元素被认为是有效的）它似乎不支持使用标志（在JavaScript正则表达式中为m），以允许^和$字符分别表示开头和结尾每一行）。

pattern的简单演示，指定文本<input />元素在az（小写）范围内最多应包含五个字符，使用:invalid选择器直观显示表示无效条目：

input {
  border-width: 5px;
}
input:valid {
  border-color: #0f0;
}
input:invalid {
  border-color: #f00;
}
input + span::before {
  content: 'in';
  transition: color 0.6s linear;
}
input:valid + span::before {
  color: transparent;
}
input:invalid + span::before {
  color: #000;
}
input + span::after {
  content: 'valid';
}

<input type="text" pattern="[a-z]{0,5}" title="Any five lower-case characters from 'a' to 'z' only." />
<span></span>

JS Fiddle demo

参考文献：

有没有办法在textarea字段的每一行设置最大长度约束？

1 个答案: