Question

我有一个相当简单的CSS问题。我有一个输入文本字段，在页面加载时我希望它的宽度为150px。

但是，当用户输入一些文字时，如果文字宽度大于150像素，则宽度应自动调整。

这是一名掠夺者：

http://plnkr.co/edit/ig0BQrJDiEtXKV8zJ2w2?p=preview

HTML：

<input class="input-class" type="text" placeholder="Placeholder">

CSS：

.input-class-2 {
  -moz-border-bottom-colors: none;
  -moz-border-left-colors: none;
  -moz-border-right-colors: none;
  -moz-border-top-colors: none;
  border-color: -moz-use-text-color -moz-use-text-color #ef8e80;
  border-image: none;
  border-style: none none dashed;
  border-width: 0 0 1px;
  color: #ef8e80;
  cursor: pointer;
  font-family: Gotham-Book;
  font-size: 18px;
  min-width: 150px;
}

我认为min-width会这样做。

Answer 1

目前无法通过纯CSS实现此目标，可能calc和attr可以组合使用，但目前不能。所以我们必须回归JavaScript。

没有任何真正的理由为此使用jQuery。你可以说你的关注点应该是分开的＆＃34;即代码应与标记分开，但使用addEventListener很容易。但是，如果我处理一小段JavaScript，它往往会更快 - 在实现，页面呈现方面，甚至对于那些试图追踪导致输入行为奇怪的人 - 使用内联事件监听器

<input type="text" 
       style="min-width: 150px;" 
       onkeyup="this.size = Math.max(this.value.length, 1)" 
/>

或：

<input type="text" 
       style="width: 150px;" 
       onkeyup="
         this.style.width = '1px';
         this.style.width = (
             this.scrollWidth &gt; 140
           ? this.scrollWidth + 10
           : 150
         )+'px';
       " 
/>

免责声明：显然，如果您正在实施许多这些输入，那么编写一个通用函数来处理它们要好得多。另外，通过使用样式表来避免内联样式总是好得多。

/**
 * Directly setting the size attribute, with minWidth
 */
function autosize(elm, minWidth){
  var keyup = function(e){
    var t = e.target || e.srcElement;
    var v = Math.max(t.value.length, 1);
    t.setAttribute
      ? t.setAttribute('size', v)
      : (t['size'] = v)
    ;
  };
  elm.style.minWidth = minWidth+'px';
  elm.addEventListener
    ? elm.addEventListener('keyup', keyup)
    : elm.attachEvent('onkeyup', keyup)
  ;
};

size属性是目前最明显的选择，尽管你可以直接设置宽度 - 如果你愿意 - 使用scrollWidth。

/**
 * Directly setting width, with minWidth
 */
function autosize(elm, minWidth){
  var keyup = function(e){
    var t = e.target || e.srcElement;
    t.style.width = '1px';
    t.style.width = t.scrollWidth + 'px';
  };
  elm.style.minWidth = minWidth+'px';
  elm.addEventListener
    ? elm.addEventListener('keyup', keyup)
    : elm.attachEvent('onkeyup', keyup)
  ;
};

您可以通过将目标元素作为第一个参数传递来触发这些函数中的任何一个。有许多方法可以找到你的元素，最简单和最普遍的元素getElementById。虽然您只能在浏览器解析后找到您的元素，但您使用的脚本标记 - 运行以下代码 - 必须放在标记中的元素下方，即{ {1}}（首选），或等待窗口加载或DOM准备就绪后。

<body>

＆＃13;

autosize( document.getElementById('myinput'), 150 );

＆＃13;

/**
 * Directly setting width, with minWidth
 */
function autosize1(elm, minWidth){
  var keyup = function(e){
    var t = e.target || e.srcElement;
    t.style.width = '1px';
    t.style.width = t.scrollWidth + 'px';
  };
  elm.style.minWidth = minWidth+'px';
  elm.addEventListener
    ? elm.addEventListener('keyup', keyup)
    : elm.attachEvent('onkeyup', keyup)
  ;
};

/**
 * Directly setting the size attribute, with minWidth
 */
function autosize2(elm, minWidth){
  var keyup = function(e){
    var t = e.target || e.srcElement;
    var v = Math.max(t.value.length, 1);
    t.setAttribute
      ? t.setAttribute('size', v)
      : (t['size'] = v)
    ;
  };
  elm.style.minWidth = minWidth+'px';
  elm.addEventListener
    ? elm.addEventListener('keyup', keyup)
    : elm.attachEvent('onkeyup', keyup)
  ;
};

autosize1( document.getElementById('a'), 150 );
autosize2( document.getElementById('b'), 150 );

＆＃13;

Answer 2

您可以尝试这样：

function resizeInput() {
    $(this).attr('size', $(this).val().length);
}

$('input[type="text"]')
    .keyup(resizeInput)
    .each(resizeInput);

<强> JSFIDDLE DEMO

还有一种方法可以使用

<span contenteditable="true">Some Text</span>

而不是使用Input代码。

<强> JSFIDDLE DEMO

Answer 3

您可以尝试这样的事情

＆＃13;

$('.input-class').keyup(function(){
    var textlength=$('.input-class').val().length
    $(this).width(textlength * 8)
})

＆＃13;

.input-class{
  -moz-border-bottom-colors: none;
  -moz-border-left-colors: none;
  -moz-border-right-colors: none;
  -moz-border-top-colors: none;
  border-color: -moz-use-text-color -moz-use-text-color #ef8e80;
  border-image: none;
  border-style: none none dashed;
  border-width: 0 0 1px;
  color: #ef8e80;
  cursor: pointer;
  font-family: Gotham-Book;
  font-size: 18px;
  min-width: 150px;
    width:auto;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input class="input-class" type="text" placeholder="Placeholder">

＆＃13;

输入文本时增加输入字段的大小

3 个答案: