Question

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

例如

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

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

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

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

任何人都可以知道如何做到这一点？谢谢！

Answer 1

如果您使用Monospaced font（每个字符固定宽度），则输入框宽度最多可容纳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元素，创建div，将input的CSS复制到创建的div，应用{float 1}}（允许其宽度由其内容确定）然后将该宽度分配给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 Fiddle demo

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

3 个答案: