javascript - 根据字符大小指定输入字段宽度

Question

我正在尝试设置输入字段以确保用户可以看到输入字段的总长度。

例如

<input size='60' type='text'/>

我希望用户一次看到总共 60 个字符，而不是看到总长度被截断到 50 左右。

我无法指定输入字段的宽度，因为无法知道宽度是多少（可能是短的或长的，而且是动态的）。

http://jsfiddle.net/j2KrZ/4/

谁能知道如何做到这一点？谢谢！

Answer 1

如果您使用等宽字体（每个字符的宽度固定），输入框的宽度应最多可容纳 60 个字符。在 IE10、Firefox 22 和 Chrome 30.0.1599.69 中测试

用于解决此问题的等宽字体示例：

<input size='60' maxlength='60' style="font-family: 'Courier New', Courier, monospace;" type='text' value='123456789012345678901234567890123456789012345678901234567890'/>

Answer 2

如果您正在寻找动态输入宽度，您可以使用事件处理程序：

$("input").keyup(function(){
    $(this).width($("input").val().length * w); // w = width of a single char (if monospace), otherwise max char width    
});

Answer 3

一种有点笨拙的方法，它遍历每个input元素，创建 a div，将 CSS 的 CSS 复制input到 created div，应用 a float（允许其宽度由其内容确定），然后将该宽度分配给input（并删除 created-元素）：

$('input[type="text"]').css('width', function (){
    // gets the applied style as it appears once rendered in the page:
    var styles = window.getComputedStyle(this, null),
    // temporary element:
        tmp = document.createElement('div');

    // creates a textNode child for the div, containing the value of the input:
    tmp.appendChild(document.createTextNode(this.value));

    // sets the style attribute of the div to those styles of the input
    // (note that 'tmp.style = styles['cssText']' did not work, sadly):
    tmp.setAttribute('style', styles['cssText']);

    // floating, so the width is determined by the content, not the parent-width:
    tmp.style.float = 'left';

    // appends the div to the body:
    document.body.appendChild(tmp);

    // gets the rendered width of the div and stores it:
    var w = window.getComputedStyle(tmp, null).width;

    // removes the div, since it's no longer required:
    tmp.parentNode.removeChild(tmp);

    // returns the width, to set the width of the input element:
    return w;
});

JS 小提琴演示。