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

你可以试试这个。

我们把内容隐藏起来span，然后根据spanscrollWidth调整宽度。

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

首先，您可以使用 jQuery 方法来避免跨浏览器问题。scrollWidth 返回元素内容的宽度（以像素为单位）或元素本身的宽度，以较大者为准。因此，只有在内容宽度远大于元素宽度时才放大 newWidth。

$("#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);

});

如果您不想在按下退格键时使输入变小 - 如果是代码的一部分，请删除 else。

于 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 回答