入力するとHTMLテキスト入力フィールドが大きくなりますか？

81

次のように、cssで初期テキスト入力サイズを設定できます。

width: 50px;

しかし、たとえば200pxに達するまで、入力すると大きくなります。これはストレートcss、htmlで、できればjavascriptなしで実行できますか？

もちろん、js / jqueryソリューションも投稿してください。ただし、これがなくても実行できる場合は、それはすばらしいことです。

ここで私の試み：

http://jsfiddle.net/jszjz/2/

javascript  jquery  html  css 
— スタン
ソース
私はこのSOの質問があなたを助けると思います： stackoverflow.com/questions/1288297/…–
— Curt
記録のために、私ではありませんでした。私がリンクした質問と似ていますが、有効な質問のようです。
— Curt 2011
アンドレ：コメントを建設的にしてください。
— セス
1
contenteditableの段落を使用できます。それはあなたがそれ自身でタイプするにつれて拡大するでしょう。
— コスタ

回答:

107

これはCSSとコンテンツ編集可能のみの例です：

jsFiddleの例

CSS

span 
{
    border: solid 1px black;
}
div 
{
    max-width: 200px;   
}

HTML

<div>
    <span contenteditable="true">sdfsd</span>
</div>
— ジョー
ソース
4
わーい。IE6-9、最新のOpera、Firefox、Chrome、そしてOMGで試してみましたが、どこでも動作しました。
— スタン2011
4
Chromeの私にとって、これは最大幅に達したときに要素を1行下に拡張します。入力がフォームの一部であることが意図されている場合も機能しません。
— ポール
5
複数行の入力フィールド（カスタム改行）の場合は、交換してくださいspanによるdiv。word-wrap: break-word必要になるかmax-width、divボックスをオーバーフローするよりも長い単語が必要になることに注意してください：jsfiddle.net/YZPmC/157
— CodeManX
6
コピーアンドペーストでコンテンツ編集可能なスパンに入る可能性のある不要なhtmlをスクラブするようにしてください。
— ブライアンピーコック
3
これはフォームで送信されますか？
— トマシュザト-モニカを復活させる2015年
38

私はあなたのためにこれを書いたばかりです、あなたがそれを好きになることを願っています:)それがクロスブラウザであるという保証はありませんが、私はそれがそうだと思います:)

(function(){
    var min = 100, max = 300, pad_right = 5, input = document.getElementById('adjinput');

    input.style.width = min+'px';
    input.onkeypress = input.onkeydown = input.onkeyup = function(){
        var input = this;
        setTimeout(function(){
            var tmp = document.createElement('div');
            tmp.style.padding = '0';
            if(getComputedStyle)
                tmp.style.cssText = getComputedStyle(input, null).cssText;
            if(input.currentStyle)
                tmp.style.cssText = input.currentStyle.cssText;
            tmp.style.width = '';
            tmp.style.position = 'absolute';
            tmp.innerHTML = input.value.replace(/&/g, "&amp;")
                                       .replace(/</g, "&lt;")
                                       .replace(/>/g, "&gt;")
                                       .replace(/"/g, "&quot;")
                                       .replace(/'/g, "&#039;")
                                       .replace(/ /g, '&nbsp;');
            input.parentNode.appendChild(tmp);
            var width = tmp.clientWidth+pad_right+1;
            tmp.parentNode.removeChild(tmp);
            if(min <= width && width <= max)
                input.style.width = width+'px';
        }, 1);
    }
})();

JSFiddle

— ポール
ソース
これをありがとう。私はそれをcontenteditable属性で行うことにしましたが、これはjsを必要としません。
— スタン2011
34
「私はあなたのためにこれを書いた」。努力のための+1 :)
— ケビンマーティンホセ
これで複数の入力をターゲットにするにはどうすればよいですかid='adjinput'
— Teachertyler 2015年
とてもクリエイティブで大好きです
— Deryck 2016年
2
これは、コンテンツの変更がキーボードの使用によってのみ発生することを前提としています。
— 2017年
7

表示するスパンを設定した場合：インラインブロック、自動水平および垂直サイズ変更は非常にうまく機能します：

<span contenteditable="true" 
      style="display: inline-block;
             border: solid 1px black;
             min-width: 50px; 
             max-width: 200px">
</span>
スニペットを展開

— lastmjs
ソース
6

入力のサイズ属性をプログラムで変更するのはどうですか？

意味論的に（imo）、このソリューションは、ユーザー入力に入力フィールドを使用するため、受け入れられているソリューションよりも優れていますが、jQueryが少し導入されています。Soundcloudは、タグ付けのためにこれと同様のことを行います。

<input size="1" />

$('input').on('keydown', function(evt) {
    var $this = $(this),
        size = parseInt($this.attr('size'), 10),
        isValidKey = (evt.which >= 65 && evt.which <= 90) || // a-zA-Z
                     (evt.which >= 48 && evt.which <= 57) || // 0-9
                     evt.which === 32;

    if ( evt.which === 8 && size > 0 ) {
        // backspace
        $this.attr('size', size - 1);
    } else if ( isValidKey ) {
        // all other keystrokes
        $this.attr('size', size + 1);
    }
});

http://jsfiddle.net/Vu9ZT/

— マフ
ソース
2
テキストを強調表示してバックスペースを
— 押すと
3
カウントvalue.lengthはより簡単で信頼性が高いと思います。
— トマシュザト-モニカを復活させる2015年
1
削除キーはこれを成長させます
— Ricca 2016
3

いくつかのことが頭に浮かびます。

onkeydownテキストフィールドでハンドラーを使用し、テキスト*を測定し、それに応じてテキストボックスのサイズを大きくします。

:focuscssクラスを幅の広いテキストボックスに添付します。そうすると、焦点を合わせるとボックスが大きくなります。それはあなたが求めているものではありませんが、似ています。

* javascriptでテキストを測定するのは簡単ではありません。いくつかのアイデアについては、この質問を確認してください。

— セス
ソース
これまでのベストアンサー。:focus { width: 100% }
— オールドボーイ
3

From：テキストフィールド用のjQuery自動拡張プラグインはありますか？

ここでデモを参照してください：http：//jsbin.com/ahaxe

プラグイン：

(function($){

    $.fn.autoGrowInput = function(o) {

        o = $.extend({
            maxWidth: 1000,
            minWidth: 0,
            comfortZone: 70
        }, o);

        this.filter('input:text').each(function(){

            var minWidth = o.minWidth || $(this).width(),
                val = '',
                input = $(this),
                testSubject = $('<tester/>').css({
                    position: 'absolute',
                    top: -9999,
                    left: -9999,
                    width: 'auto',
                    fontSize: input.css('fontSize'),
                    fontFamily: input.css('fontFamily'),
                    fontWeight: input.css('fontWeight'),
                    letterSpacing: input.css('letterSpacing'),
                    whiteSpace: 'nowrap'
                }),
                check = function() {

                    if (val === (val = input.val())) {return;}

                    // Enter new content into testSubject
                    var escaped = val.replace(/&/g, '&amp;').replace(/\s/g,'&nbsp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
                    testSubject.html(escaped);

                    // Calculate new width + whether to change
                    var testerWidth = testSubject.width(),
                        newWidth = (testerWidth + o.comfortZone) >= minWidth ? testerWidth + o.comfortZone : minWidth,
                        currentWidth = input.width(),
                        isValidWidthChange = (newWidth < currentWidth && newWidth >= minWidth)
                                             || (newWidth > minWidth && newWidth < o.maxWidth);

                    // Animate width
                    if (isValidWidthChange) {
                        input.width(newWidth);
                    }

                };

            testSubject.insertAfter(input);

            $(this).bind('keyup keydown blur update', check);

        });

        return this;

    };

})(jQuery);
— cmpolis
ソース
2

ここでは、このようなことを試すことができます

編集：改訂された例（1つの新しいソリューションを追加） http://jsfiddle.net/jszjz/10/

コードの説明

var jqThis = $('#adjinput'), //object of the input field in jQuery
    fontSize = parseInt( jqThis.css('font-size') ) / 2, //its font-size
    //its min Width (the box won't become smaller than this
    minWidth= parseInt( jqThis.css('min-width') ), 
    //its maxWidth (the box won't become bigger than this)
    maxWidth= parseInt( jqThis.css('max-width') );

jqThis.bind('keydown', function(e){ //on key down
   var newVal = (this.value.length * fontSize); //compute the new width

   if( newVal  > minWidth && newVal <= maxWidth ) //check to see if it is within Min and Max
       this.style.width = newVal + 'px'; //update the value.
});

そしてCSSもかなり簡単です

#adjinput{
    max-width:200px !important;
    width:40px;
    min-width:40px;
    font-size:11px;
}

編集：別の解決策は、ユーザーに必要なものを入力させ、ぼかし（フォーカスアウト）で文字列を取得し（同じフォントサイズで）divに配置します-divの幅を数えます-そしてクールなアニメーションでイージング効果は、入力フィールドの幅を更新します。唯一の欠点は、ユーザーが入力している間、入力フィールドが「小さい」ままになることです。または、タイムアウトを追加することもできます:)上記のフィドルでもそのような種類の解決策を確認できます！

— パンテリス
ソース
font-size完璧な解決策ではありません。悪くはなく、確かに反対票を投じる価値はありませんが、文字をi数回入力してみると、サイズに非常に偏った結果が表示されます。これに対する修正については、私の答えを参照してください。
— ポール
フォントサイズを使用せず、滑らかさを選択する私のフィドルの2番目の例を参照してください。最初のものは、スピードとスピードのためだけに追加されました-アスカーが望んでいたものを維持しながら。divの追加テキストを作成したり、幅を計算したりする必要があることは、私には「重い」ように思えます。
— パンテリス2011
理由はわかりませんが、2番目の例ではサイズがまったく変更されていません。また、私のソリューション（一時的なdivなどを作成する）は、最新のコンピューターで平均して1秒あたり約800回実行でき、99.5では1秒あたり100回よりも遅くなることはないことにも注意してください。現在も使用されているコンピューターの割合）
— Paul
2

私はこれが非常に古い投稿であることを知っています-しかし私の答えはとにかく他の人に役立つかもしれないので、ここに行きます。contenteditable divのCSSスタイル定義のmin-heightが200ではなく200の場合、divは自動的にスケーリングされることがわかりました。

— b0rgBart3
ソース
1

あなたは、単に成長に興味を持っている場合は、更新することができますwidthへscrollWidthの、いつでも内容をinput要素の変更さます。

document.querySelectorAll('input[type="text"]').forEach(function(node) {
  node.onchange = node.oninput = function() {
    node.style.width = node.scrollWidth+'px';
  };
});

しかし、これは要素を縮小しません。

— ceving
ソース
1

もちろん、どちらのアプローチを使用するかは、最終目標が何であるかによって異なります。フォームを使用して結果を送信する場合は、ネイティブフォーム要素を使用すると、送信にスクリプトを使用する必要がなくなります。また、スクリプトがオフになっている場合でも、フォールバックは派手な拡大縮小効果なしで機能します。contenteditable要素からプレーンテキストを取得したい場合は、いつでもnode.textContentのようなスクリプトを使用して、ブラウザーがユーザー入力に挿入するhtmlを取り除くことができます。

このバージョンでは、以前の投稿の一部を少し改良したネイティブフォーム要素を使用しています。

コンテンツを縮小することもできます。

これをCSSと組み合わせて使用​​すると、制御が向上します。

<html>

<textarea></textarea>
<br>
<input type="text">


<style>

textarea {
  width: 300px;
  min-height: 100px;
}

input {
  min-width: 300px;
}


<script>

document.querySelectorAll('input[type="text"]').forEach(function(node) {
  var minWidth = parseInt(getComputedStyle(node).minWidth) || node.clientWidth;
  node.style.overflowX = 'auto'; // 'hidden'
  node.onchange = node.oninput = function() {
    node.style.width = minWidth + 'px';
    node.style.width = node.scrollWidth + 'px';
  };
});

<textarea>要素と同様のものを使用できます

document.querySelectorAll('textarea').forEach(function(node) {
  var minHeight = parseInt(getComputedStyle(node).minHeight) || node.clientHeight;
  node.style.overflowY = 'auto'; // 'hidden'
  node.onchange = node.oninput = function() {
    node.style.height = minHeight + 'px';
    node.style.height = node.scrollHeight + 'px';
  };
});

これはChromeではちらつきません。他のブラウザでは結果が異なる場合があるため、テストしてください。

— ケビン・ダグラス
ソース
0

これが私のために働いた方法です。フィールドに入力すると、そのテキストが非表示のスパンに配置され、新しい幅が取得されて入力フィールドに適用されます。入力に応じて拡大および縮小し、すべての入力を消去したときに入力が事実上消えないようにします。Chromeでテスト済み。（編集：この編集の時点では、Safari、Firefox、およびEdgeで動作します）

function travel_keyup(e)
{
    if (e.target.value.length == 0) return;
    var oSpan=document.querySelector('#menu-enter-travel span');
    oSpan.textContent=e.target.value;
    match_span(e.target, oSpan);
}
function travel_keydown(e)
{
    if (e.key.length == 1)
    {
        if (e.target.maxLength == e.target.value.length) return;
        var oSpan=document.querySelector('#menu-enter-travel span');
        oSpan.textContent=e.target.value + '' + e.key;
        match_span(e.target, oSpan);
    }
}
function match_span(oInput, oSpan)
{
    oInput.style.width=oSpan.getBoundingClientRect().width + 'px';
}

window.addEventListener('load', function()
{
    var oInput=document.querySelector('#menu-enter-travel input');
    oInput.addEventListener('keyup', travel_keyup);
    oInput.addEventListener('keydown', travel_keydown);

    match_span(oInput, document.querySelector('#menu-enter-travel span'));
});
#menu-enter-travel input
{
	width: 8px;
}
#menu-enter-travel span
{
	visibility: hidden;
    position: absolute;
    top: 0px;
    left: 0px;
}
<div id="menu-enter-travel">
<input type="text" pattern="^[0-9]{1,4}$" maxlength="4">KM
<span>9</span>
</div>
スニペットを展開

— アーロンメイソン
ソース
0

ch測定（等幅）の使用が許可されている場合は、私がやろうとしていたことを完全に解決しました。

onChange(e => {
    e.target.style.width = `${e.target.length}ch`;
})

これはまさに私が必要としていたものでしたが、動的幅のフォントファミリで機能するかどうかはわかりません。

— jscul
ソース
0

inputまたはtextareaで機能するソリューションを厳密に探している人にとって、これは私が出会った中で最も単純なソリューションです。ほんの数行のCSSと1行のJS。

JavaScriptは、入力の値に等しい要素にdata- *属性を設定します。入力はCSSグリッド内に設定されます。このグリッドは、そのdata- *属性をコンテンツとして使用する疑似要素です。そのコンテンツは、入力値に基づいてグリッドを適切なサイズに拡大するものです。

— チェンW
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.