auto-resizing text input box html

后端未结

关注

 3  1661

I created an input (type text) box and made it auto-resize quite simply. However, there are a few glitches that I can\'t seem to fix:

when I start typing the box s

相关标签:

3条回答

说谎

2021-01-26 19:27

You can try this.

We put the content in a hidden span & then adjust width according to span scrollWidth.

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>

0 讨论(0)

我在风中等你

2021-01-26 19:42
```
<input type="text" id="inputbox" name="input" placeholder="yes" width="100px"/>
```
Remove the width="100px", like this:
```
<input type="text" id="inputbox" name="input" placeholder="yes"/>
```
And it won't resize down anymore when starting to type.

Live example:

http://jsfiddle.net/2EMfd/

Though, the exanding function doesn't seem to work in my browser?

*Edit, did a simple expand function on the inputbox is this what you where trying? http://jsfiddle.net/2EMfd/1/
0 讨论(0)
发布评论:

提交评论
- 加载中...
半阙折子戏

2021-01-26 19:48
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.
0 讨论(0)
发布评论:

提交评论
- 加载中...