javascript - 文字サイズに基づいて入力フィールド幅を指定する

Question

ユーザーが入力フィールドの全長を確認できるように入力フィールドを設定しようとしています。

例えば

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

合計の長さが約 50 文字に切り捨てられるのではなく、一度に合計 60 文字を表示するようにユーザーに求めます。

幅がどうなるかを知る方法がないため、入力フィールドの幅を指定できません (短くても長くても動的です)。

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

誰でもこれを行う方法を考えられますか? ありがとう！

Answer 1

モノスペース フォント(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各要素を繰り返し処理し、 を作成しdiv、 の CSS を作成した にコピーしinput、 (コンテンツによって幅を決定できるようにするため) をdiv適用してfloatから、その幅を に割り当てinput(そして作成されたエレメント）：

$('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 フィドルのデモ。