Javascript 我是否可以创建一个HTML输入字段，当它为“0”时停止接受字符；完整的；？

我想创建HTML输入字段（单行或文本区域），当它们“满”时，即当小部件中没有更多空间显示新字符时，它们将停止接受新文本

这不同于对字符数设置maxlength限制，因为（例如）65个小写字母“i”在比例字体中比65个大写字母“W”占用的空间小得多

有办法做到这一点吗？（如果有，理想情况下，解决方案还将覆盖粘贴文本的时间，并截断超出限制的所有文本）

---

编辑：该解决方案必须使用比例字体-maxlength在这里没有帮助，我们不想在字符长度处停止。

您可以使用maxlength属性

<input type="text" id="Textbox" name="Textbox" maxlength="10" />

---

jquery inputfit插件怎么样？检查和

您可以更改源以适应您的需求。显然，如果您正在用纯JavaScript搜索解决方案，那么必须使用jquery库可能并不合适

---

检查选项（最小大小、最大大小），它们似乎适合您的要求

以下使用中的答案来计算文本的宽度，我将其链接到一个文本框。它的代码非常粗糙：D，但它确实很好地限制了文本框。同样的原理也可以用于文本区域，但也必须同时用于高度和宽度

-它将内容输出到控制台，所以如果您查看，最好将其打开

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+"]");
    }
}

String.prototype.width=函数（字体）{
var f=font | |“12px arial”，
o=$（''+此+''）
.css（{'position'：'absolute'，'float'：'left'，'white space'：'nowrap'，'visibility'：'hidden'，'font'：f}）
.appendTo（$（“body”），
w=o.宽度（）；
o、 删除（）；
返回w；
}
$（'#textinput'）。on（'keyup'，validatetext）；
函数validatetext（e）{
var w=parseInt（e.target.value.width（））；
如果（w>100）{
log（“宽度Gt 100px[“+w+”px]字符数[“+e.target.value.length+”]）；
做{
e、 target.value=e.target.value.slice（0，-1）；
}while（parseInt（e.target.value.width（））>100）
}否则{
log（“继续！[”+w+“px]字符计数[”+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+"]");
    }
}

String.prototype.width=函数（字体）{
var f=font | |“12px arial”，
o=$（''+此+''）
.css（{'position'：'absolute'，'float'：'left'，'white space'：'nowrap'，'visibility'：'visible'，'font'：f}）
.appendTo（$（“body”），
w=o.宽度（）；
o、 删除（）；
返回w；
}
String.prototype.height=函数（字体）{
var f=font | |“12px arial”，
o=$（''+此.replace（/[\r\n]/g，'
'）+''）
.css（{'position'：'absolute'，'float'：'left'，'white space'：'nowrap'，'visibility'：'hidden'，'font'：f}）
.appendTo（$（“body”），
w=o.高度（）；
o、 删除（）；
返回w；
}
$（'#textinput'）。on（'keyup'，validatetext）；
$（“#areainput”）.keyup（validatearea）；
功能验证earea（e）{
var w=parseInt（$（this.val（）.width（））；
var h=parseInt（$（this.val（）.height（））；
var errw=假；
var errh=假；
如果（h>100）{
errh=true
}
var lines=$（this.val（）.split（/[\r\n]/）；
var errw=假；
对于（变量i=0；i 100）{
errw=真；
}
}
if（（errh==true）| |（errw==true））{
如果（（errh==true）和&（errw==false））{
$（'#areaerror'）.html（“太高，宽度正常”）；
}
如果（（errh==false）&&（errw==true））{
$（'#areaerror'）.html（“高度正常，太宽”）；
}
如果（（errh==true）和&（errw==true））{
$（'#areaerror'）.html（“太高，太宽”）；
}
}否则{
$（'#areaerror'）.html（“很好”）；
}
}
函数validatetext（e）{
var w=parseInt（e.target.value.width（））；
如果（w>100）{
log（“宽度Gt 100px[“+w+”px]字符数[“+e.target.value.length+”]）；
做{
e、 target.value=e.target.value.slice（0，-1）；
}while（parseInt（e.target.value.width（））>100）
}否则{
log（“继续！[”+w+“px]字符计数[”+e.target.value.length+“]）；
}
}

将maxlenght attr应用于输入filed@EnterJQ-不适用于textarea。答案是：您可以将单间距字体与

最大长度

一起使用，但我假设您的输入中明确需要可变数量的字符。如果用户定义了自定义字体和字体大小，该怎么办？实际要求是什么？为什么在可见区域“满”时停止？谢谢，但请看问题-不能使用maxlength，因为10“i”占用的可见空间小于10“W”。这看起来是一个很好的开始，谢谢Nick！我很难将输入字段的限制与字段完全对齐，但这是一个非常有希望的开始。您需要确保

高度

和

宽度

函数中使用的样式与当前默认为12px arial的textarea相匹配（我没有为我的演示做准备，所以它可能也错了）