我可以创建一个在“已满”时停止接受字符的 HTML 输入字段吗？答案

【问题标题】：Can I create an HTML input field that stops accepting characters when it is "full"?我可以创建一个在“已满”时停止接受字符的 HTML 输入字段吗？
【发布时间】：2013-02-22 12:33:12
【问题描述】：

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

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

有没有办法做到这一点？（如果有，理想情况下，该解决方案还可以涵盖粘贴文本的时间，并截断超出限制的所有文本。

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

【问题讨论】：

将最大长度属性应用于输入字段
@EnterJQ - 不适用于 textarea。
这是答案：stackoverflow.com/questions/1752768/…
您可以将等距字体与max-length 一起使用，但我假设您在输入中明确需要可变数量的字符。
如果用户定义了自定义字体和字体大小怎么办？实际要求是什么？为什么要在可见区域“满”时停下来？

标签： javascript html

【解决方案1】：

以下使用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+"]");
    }
}

更新

http://jsfiddle.net/LMKtd/8/

我也为文本区域设计了一个。它不会阻止您超越限制，但它会告诉您何时它太宽或太高。这不是很漂亮：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+"]");
    }
}

【讨论】：

这看起来是一个很好的开始，谢谢尼克！我无法让输入字段的限制与该字段完全对齐，但这是一个非常有希望的开始。
您需要确保 height 和 width 函数中使用的样式与您的 textarea 的样式相匹配，因为它目前默认为 12px arial（我的演示中没有，所以它可能是错误的太）

【解决方案2】：

你可以使用 maxlength 属性

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

【讨论】：

谢谢，但请参阅问题 - 不能使用 maxlength，因为 10 个“i”占用的可见空间少于 10 个“W”

【解决方案3】：

jquery inputfit 插件怎么样？检查demo 和source

您可以更改来源以满足您的要求。显然，如果您正在寻找纯 JavaScript 的解决方案，您必须使用 jquery 库，这可能不适合。

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

【讨论】：