我想创建 HTML 输入字段(单行或文本区域),当它们“已满”时停止接受新文本 - 即当小部件中没有更多空间来显示新字符时。
这不同于对字符数设置最大长度限制,因为(例如)在比例字体中,65 个小写字母“i”比 65 个大写字母“W”占用的空间少得多。
有没有办法做到这一点? (如果存在,理想情况下,该解决方案还包括粘贴文本的时间,并 chop 超出限制的所有文本)。
编辑:解决方案必须使用比例字体 - maxlength 在这里没有帮助,我们对停在一个字符长度不感兴趣。
最佳答案
以下使用来自 https://stackoverflow.com/a/5047712/212869 的答案计算文本的宽度,我把它链接到一个文本框。它的代码非常粗糙 :D 但它确实很好地限制了文本框。同样的原则可以用在文本区域上,但你也可以对高度和宽度都这样做。
http://jsfiddle.net/LMKtd/1/ - 它将内容输出到控制台,所以如果你看的话最好打开它。
String.prototype.width = function(font) {
var f = font || '12px arial',
o = $('<div>' + this + '</div>')
.css({'position': 'absolute', 'float': 'left', 'white-space': 'nowrap', 'visibility': 'hidden', 'font': f})
.appendTo($('body')),
w = o.width();
o.remove();
return w;
}
$('#textinput').on('keyup', validatetext);
function validatetext(e) {
var w = parseInt(e.target.value.width());
if (w > 100) {
console.log("Width Gt 100px ["+w+"px] Char Count ["+e.target.value.length+"]");
do {
e.target.value = e.target.value.slice(0,-1);
} while (parseInt(e.target.value.width()) > 100)
} else {
console.log("Keep going! ["+w+"px] Char Count ["+e.target.value.length+"]");
}
}
更新
我也为文本区域拼凑了一个。它不会阻止您超过限制,但会告诉您它何时太宽或太高。它不是很漂亮:D
String.prototype.width = function(font) {
var f = font || '12px arial',
o = $('<div>' + this + '</div>')
.css({'position': 'absolute', 'float': 'left', 'white-space': 'nowrap', 'visibility': 'visible', 'font': f})
.appendTo($('body')),
w = o.width();
o.remove();
return w;
}
String.prototype.height = function(font) {
var f = font || '12px arial',
o = $('<div>' + this.replace(/[\r\n]/g,'<br />') + '</div>')
.css({'position': 'absolute', 'float': 'left', 'white-space': 'nowrap', 'visibility': 'hidden', 'font': f})
.appendTo($('body')),
w = o.height();
o.remove();
return w;
}
$('#textinput').on('keyup', validatetext);
$('#areainput').keyup(validatearea);
function validatearea(e) {
var w = parseInt($(this).val().width());
var h = parseInt($(this).val().height());
var errw = false;
var errh = false;
if (h>100) {
errh = true
}
var lines = $(this).val().split(/[\r\n]/);
var errw = false;
for (var i = 0; i<lines.length; i++) {
if (parseInt(lines[i].width()) > 100) {
errw = true;
}
}
if ((errh == true) || (errw == true)) {
if ((errh == true) && (errw == false)) {
$('#areaerror').html("Too Tall, Width OK");
}
if ((errh == false) && (errw == true)) {
$('#areaerror').html("Height OK, Too Wide");
}
if ((errh == true) && (errw == true)) {
$('#areaerror').html("Too Tall, Too Wide");
}
} else {
$('#areaerror').html("Were Good");
}
}
function validatetext(e) {
var w = parseInt(e.target.value.width());
if (w > 100) {
console.log("Width Gt 100px ["+w+"px] Char Count ["+e.target.value.length+"]");
do {
e.target.value = e.target.value.slice(0,-1);
} while (parseInt(e.target.value.width()) > 100)
} else {
console.log("Keep going! ["+w+"px] Char Count ["+e.target.value.length+"]");
}
}
关于javascript - 我可以创建一个 HTML 输入字段,当它是 "full"时停止接受字符吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15024345/