1

入力 (タイ​​プ テキスト) ボックスを作成し、非常に簡単に自動サイズ変更しました。ただし、修正できないように見えるいくつかの不具合があります。

  1. 入力を開始すると、ボックスが少し縮小します
  2. バックスペース (または方向矢印) を押すと、ボックスが最初に拡大し、入力を続けると縮小します。

これが私のコードです：

function Expander() {
    	
    this.start = function () {
    			
        $("#inputbox").keydown(function(e) {
               			
            this.style.width = 0;
            var newWidth = this.scrollWidth + 10;
    			
            if( this.scrollWidth >= this.clientWidth )
                newWidth += 10;
    				
            this.style.width = newWidth + 'px';
    			
        });
    		
    }
    	
}
    
    
$(function() {
   	window.app = new Expander();
   	window.app.start();
});
input {
    	margin-left:3em;
    	min-width:100px;
    	max-width:600px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<meta charset="UTF-8">
<body>

    <div id="wrap">
    	<input type="text" id="inputbox" name="input" placeholder="I want this to resize smoothly." width="100px"/>
    </div>
    <div id="counter"></div>
</body>

4

3 に答える 3

3

これを試すことができます。

コンテンツを非表示にしてから、 scrollWidthspanに従って幅を調整します。span

function Expander() {

    this.start = function () {

        $('#inputbox').on('keydown',function(e) {

            $("#hidden_span").html("");
            $("#hidden_span").append("<p>"+$(this).val()+"</p>");

            var hidden_span_scroll_width=$("#hidden_span")[0].scrollWidth;

            if(hidden_span_scroll_width> 100||hidden_span_scroll_width< 600){
                $(this).css("width",hidden_span_scroll_width);
            }

        });

    }

}


$(function() {
    window.app = new Expander();
    window.app.start();
});
input {
    margin-left:3em;
    min-width:100px;
    max-width:600px;
}

#hidden_span{
    position:absolute;
    top:0px;
    left:0px;
    visibility:hidden;
    width:10px;
    white-space:nowrap;
    overflow:hidden;
}
<head>
<meta charset="UTF-8">
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
</head>

<body>
<div id="wrap">
    <input type="text" id="inputbox" name="input" placeholder="I want this to resize smoothly." />
</div>
<div id="counter"></div>
<span id="hidden_span"></span>
</body>

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<title>Test page</title>
</head>

<body>
<style>
input {
    margin-left:3em;
    min-width:100px;
    max-width:600px;
}
        #hidden_span{
            position:absolute;
            top:0px;
            left:0px;
            visibility:hidden;
            width:10px;
            white-space:nowrap;
            overflow:hidden;

        }
</style>
<script>

function Expander() {

    this.start = function () {

        $('#inputbox').on('keydown',function(e) {


            $("#hidden_span").html("");
            $("#hidden_span").append("<p>"+$(this).val()+"</p>");


            var hidden_span_scroll_width=$("#hidden_span")[0].scrollWidth;

     if(hidden_span_scroll_width> 100||hidden_span_scroll_width< 600){
                $(this).css("width",hidden_span_scroll_width);
                     }


        });

    }

}


$(function() {
    window.app = new Expander();
    window.app.start();
});

</script>
<div id="wrap">
    <input type="text" id="inputbox" name="input" placeholder="yes" />
</div>
<div id="counter"></div>
<span id="hidden_span"></span>
</body>
</html>
于 2013-10-17T11:47:42.260 に答える
0

At first you can use jQuery methods to avoid crossbrowser problem. And scrollWidth returns either the width in pixels of the content of an element or the width of the element itself, whichever is greater. So enlarge newWidth only when content width strongly larger than element width. 

$("#inputbox").keydown(function(e) {

  var a = $(this).width(), newWidth;


  if(this.scrollWidth - a > 0){
    newWidth = a + 10;
  }else if(e.keyCode==8){
    newWidth = a - 10;
  }
  $(this).css("width", newWidth);

});

If you don't want to make input smaller when pressed backspace - delete else if part of code.

于 2013-10-17T11:33:06.420 に答える
-1 
<input type="text" id="inputbox" name="input" placeholder="yes" width="100px"/>

次のように を削除しwidth="100px"ます。

<input type="text" id="inputbox" name="input" placeholder="yes"/>

また、入力を開始しても、サイズが縮小することはありません。

実際の例:

http://jsfiddle.net/2EMfd/

でも、拡張機能が私のブラウザでは動かないようです。

*編集、単純な展開機能を実行しましたinputboxか? http://jsfiddle.net/2EMfd/1/

于 2013-10-17T11:23:06.157 に答える