有没有办法在文本区域字段的每一行上设置最大长度限制?
Is there any way to set maximum length constraint on each row of a textarea field?
我需要满足客户的独特要求。
附上图片,
我需要强制用户在 <textarea>
字段的每行中输入超过 15 位数字且没有任何空格。 HTML 这可能吗?
我想过使用 cols
属性,但它如下所示折叠起来,第一张图片中没有任何所需的空格。
假设 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,更简单 experimentation/development.
我知道这不是你想要的,但是 HTML 确实允许 pattern
属性指定用户输入的值应该匹配的正则表达式(对于元素被认为是有效的)它似乎不支持使用标志(在 JavaScript 正则表达式中将是 m
,以允许 ^
和 $
字符分别表示每行的开始和结束)。
pattern
的简单演示,使用:invalid
选择器指定文本<input />
元素在a-z(小写)范围内最多包含五个字符直观地指示无效条目:
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>
参考文献:
- CSS:
- HTML:
- JavaScript:
我需要满足客户的独特要求。
附上图片,
我需要强制用户在 <textarea>
字段的每行中输入超过 15 位数字且没有任何空格。 HTML 这可能吗?
我想过使用 cols
属性,但它如下所示折叠起来,第一张图片中没有任何所需的空格。
假设 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,更简单 experimentation/development.
我知道这不是你想要的,但是 HTML 确实允许 pattern
属性指定用户输入的值应该匹配的正则表达式(对于元素被认为是有效的)它似乎不支持使用标志(在 JavaScript 正则表达式中将是 m
,以允许 ^
和 $
字符分别表示每行的开始和结束)。
pattern
的简单演示,使用:invalid
选择器指定文本<input />
元素在a-z(小写)范围内最多包含五个字符直观地指示无效条目:
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>
参考文献:
- CSS:
- HTML:
- JavaScript: