web-dev-qa-db-ja.com

コンテンツへのHTMLテキスト入力幅の動的調整

私はこれについて明確な答えを見つけることができず、私が見逃したものがあればすみません。

テキスト入力の幅が、その中のコンテンツのサイズに自動的に調整されるようにします。最初に、誰かが入力した実際のテキストよりもプレースホルダーテキストを使用します。

例として以下を作成しました。現在、ボックスはプレースホルダーテキストよりもはるかに大きく、大量の空白が発生します。何かを入力するときも明らかに同じです。

私は幅自動、いくつかのjQuery、およびインターネットで見つけたより糸と風船ガムを試しました。しかし、まだ何も機能していません。何かご意見は？ありがとう！

HTML：

<span><p>Hello, my name is </p></span>

<span><input type="text" id="input" class="form" placeholder="name"></span>

<span><p>. I am </p></span>

<span><input type="text" id="input" class="form" placeholder="age"></span>

    <span><p> years old.</p></span>

CSS：

.form {
    border: 0;
    text-align: center;
    outline: none;
}

span {
    display: inline-block;
}

p {
    font-family: arial;
}

フィドル

javascriptjqueryhtmlformsinput
10
ObbyOss

onkeypress evenを使用します

この例を参照してください：http://jsfiddle.net/kevalbhatt18/yug04jau/7/

<input id="txt" placeholder="name" class="form" type="text" onkeypress="this.style.width = ((this.value.length + 1) * 8) + 'px';"></span>

また、placeholderの場合、jqueryを使用し、プレースホルダーサイズを入力に適用します

$('input').css('width',((input.getAttribute('placeholder').length + 1) * 8) + 'px');

入力の代わりにidを使用することもできますが、これは単なる例であるため、$（input）

そして、CSSでは最小幅を提供します

.form {
    border: 1px solid black;
    text-align: center;
    outline: none;
    min-width:4px;
}

[〜＃〜] edit [〜＃〜]：

入力ボックスからすべてのテキストを削除すると、focusoutを使用してプレースホルダー値が取得されます

例： http://jsfiddle.net/kevalbhatt18/yug04jau/8/

$("input").focusout(function(){

    if(this.value.length>0){
        this.style.width = ((this.value.length + 1) * 8) + 'px';
    }else{
      this.style.width = ((this.getAttribute('placeholder').length + 1) * 8) + 'px';
    }

});
7
Keval Bhatt

1つの可能な方法：

[contenteditable=true]:empty:before {
  content: attr(placeholder);
  color:gray;
}
/* found this online --- it prevents the user from being able to make a (visible) newline */
[contenteditable=true] br{
  display:none;
}
<p>Hello, my name is <span id="name" contenteditable="true" placeholder="name"></span>. I am <span id="age" contenteditable="true" placeholder="age"></span> years old.</p>

CSSのソース： http://codepen.io/flesler/pen/AEIFc 。

フォームの値が必要な場合は、値を取得するためにいくつかの策略を行う必要があります。

12
sudo rm -rf slash

「size」属性で試してください。これは、テキストをクリアしても機能します。これを動作させるにはjQueryが必要です

<div>
    <input id="txt" type="text" style="max-width: 100%;" placeholder="name">
</div>
<script>
    $(document).ready(function() {
        var placeholderLen = $('#txt').attr('placeholder').length;
        // keep some default lenght
        placeholderLen = Math.max(5, placeholderLen);
        $('#txt').attr('size', placeholderLen);

        $('#txt').keydown(function() {
            var size = $(this).val().length;
            $(this).attr('size', Math.max(placeholderLen, size));
        });
    });
</script>
1
pradeep

ケビンFは正しいです、それを行うためのネイティブな方法はありません。

本当にそれを実現したい場合、これを行う1つの方法を次に示します。

コードでは、テキストが配置される目に見えないスパンがあります。次に、スパンの幅を取得します。

https://jsfiddle.net/r02ma1n0/1/

var testdiv = $("#testdiv");
$("input").keydown( function(){
    var ME = $(this);
    //Manual Way
    //var px = 6.5;
    //var txtlength = ME.val().length;
    //$(this).css({width: txtlength * px });

   testdiv.html( ME.val() + "--");
   var txtlength = testdiv.width();
   ME.css({width: txtlength  }); 
});
1
user4115765