将HTML文本输入宽度动态调整为内容 [英] Dynamically Adjust HTML Text Input Width to Content

问题描述

我无法在这方面找到明确的答案，请原谅我是否有遗漏。

我希望我的文本输入宽度自动调整到他们内容的大小。首先使用占位符文本，而不是某人输入的实际文本。

我创建了下面的示例。目前，这些框比我的占位符文本大得多，导致了大量的空白空间，而且当我键入内容时显然是同样的事情。

我试过宽度自动，一些jQuery，以及我在互联网上找到的麻线和泡泡糖。但没有任何工作。有什么想法吗？

HTML：

 < span>< p> ;你好，我的名字是< / p>< / span> 
 
< span>< input type =textid =inputclass =formplaceholder =name>< / span> 
 
< span>< p> ;.我是< / span>< / p>< / span> 
 
< span>< input type =textid =inputclass =formplaceholder =age>< / span> 
 
< span>< p>岁。< / p>< / span> 
  

CSS：

  .form {
 border：0; 
 text-align：center; 
概述：无; 
} 
 
 span {
 display：inline-block; 
} 
 
 p {
 font-family：arial; 
} 
  

解决方案

使用onkeypress甚至

查看此示例： http://jsfiddle.net/kevalbhatt18/yug04jau/7/

 < input id =txtplaceholder =nameclass =formtype = textonkeypress =this.style.width =（（this.value.length + 1）* 8）+'px';>< / span> 
  

并且对于占位符在使用jquery时应用占位符
的大小来输入

$ b

  $（'input'）。css（'width'，（（input.getAttribute（' placeholder'）。length + 1）* 8）+'px'）; 
  

即使您可以使用 id 代替输入，这仅仅是一个示例，因此我使用了
$（input）

在css中提供最小宽度

$ p $ b $

  .form {
 border：1px纯黑色; 
 text-align：center; 
概述：无; 
 min-width：4px; 
} 
  

编辑：

---

您从输入框中删除所有文本，然后使用 focusout
$ b

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

  $（input）。focusout（function（）{
 $ （this.value.length> 0）{
 this.style.width =（（this.value.length + 1）* 8）+'px'; 
} else {
 b $ b this.style.width =（（this.getAttribute（'placeholder'）。length + 1）* 8）+'px'; 
} 
 
}）; 
  

I can't quite find a clear answer on this, and excuse me if there is one I've missed.

I want my text input widths to automatically adjust to the size of the content within them. First with placeholder text than the actual text someone inputs.

I've created the below as an example. Currently, the boxes are far bigger than my placeholder text, causing huge amounts of white space, and it's obviously the same thing when I type in something.

I've tried width auto, some jQuery, and twine and bubble gum I found on the internet. But nothing has worked yet. Any thoughts? Thanks!

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;
}

Fiddle

解决方案

Use onkeypress even

see this example :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>

And for placeholder on load use jquery and apply placeholder size in to input

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

Even you can use id instead of input this is just an example so that I used $(input)

And in css provide min-width

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

---

EDIT:

---

If you remove all text from input box then it will take placeholder value using focusout

Example: 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';
    }

});

这篇关于将HTML文本输入宽度动态调整为内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！