Question

我有一个包含大量文本框的表单，而不是手动设置每个文本框的大小，我希望我可以在页面加载时将大小设置为文本框的内容。

我在这里找到了一个很好的自动生成脚本 Is there a jQuery autogrow plugin for text fields?

但如果文本框中只有1个字符

，则不知道如何使它们默认为较小

由于

Answer 1

是的，你可以用

来做

$("input").each(function(){
    var myLength = $(this).val().length;
    if(myLength == 1){
        $(this).attr('size', myLength);
        $(this).attr('class', 'mini');
    }else{
        $(this).attr('size', myLength);    
    }

});

和css类：

.mini{
    width:10px;
}

fiddle上的示例。

希望它有所帮助！

Answer 2

尝试下面的事情，如果我们说一些字符限制后将输入字段替换为textarea，请参阅以下代码：

$(".input_text").each(function(index, obj){
    var txt = $(this), txtLength = txt.val().length;
    if(txtLength <= 1){
        txt.height("25px");
    }else{
        var txtarea = $("<textarea/>");
        txt.replaceWith(txtarea.val(txt.val()));
    }
});

这里的工作示例：http://jsfiddle.net/tFDNx/2/

Answer 3

你可以使用其中任何一种都可以正常使用

1）<input id="txt" type="text" onkeypress="this.style.width = ((this.value.length + 1) * 8) + 'px';">

2）var inputEl = document.getElementById("theInput");

  function getWidthOfInput() {
    var tmp = document.createElement("span");
    tmp.className = "input-element tmp-element";
    tmp.innerHTML = inputEl.value.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
    document.body.appendChild(tmp);
    var theWidth = tmp.scrollWidth;
    document.body.removeChild(tmp);
    return theWidth;
  }

  function adjustWidthOfInput() {
    inputEl.style.width = getWidthOfInput() + "px";
  }

  adjustWidthOfInput();
  inputEl.onkeyup = adjustWidthOfInput;

3）// HTML // jQuery

$(function(){
  $('#input').keyup(function(){
    $('<span id="width">').append( $(this).val() ).appendTo('body');
    $(this).width( $('#width').width() + 2 );
    $('#width').remove();
  });
});

自动将页面加载时文本框的大小设置为其内容

3 个答案: