Question

我正在开发一个带有textarea的小项目，我需要帮助才能使文本区域像twitter和facebook一样在鼠标点击上扩展。 textarea应该首先看起来像文本字段然后点击时应该展开。

Answer 1

这可以在不使用JavaScript / jQuery的情况下使用CSS transitions完成。

＆＃13;

textarea {
    height: 1em;
    width: 50%;
    padding: 3px;
    transition: all 0.5s ease;
}

textarea:focus {
    height: 4em;
}

＆＃13;

<textarea rows="1" cols="10"></textarea>

＆＃13;

Answer 2

像这样的东西会起作用......

演示：http://jsfiddle.net/Y3rMM/

... CSS

.expand {
    height: 1em;
    width: 50%;
    padding: 3px;
}

HTML ...

<textarea class="expand" rows="1" cols="10"></textarea>

...的jQuery

$('textarea.expand').focus(function () {
    $(this).animate({ height: "4em" }, 500);
});

Answer 3

这对你有用：

<textarea rows="1" cols="40" onfocus="this.rows=10;" style="resize: none;">Tweet Tweet....</textarea>

我使用onfocus代替onclick，因为如果用户使用Tab键移动到textarea，则不会触发onclick。您还需要确保用户无法自行调整大小 - 因此也就是样式属性。

您还可以添加onblur="this.rows=1;"，以便在用户离开您的textarea后将其缩小。

Answer 4

$("textarea").focus(function(){
    $("textarea").animate({ height: "70px" }, 500);
});

默认css

textarea{ height: 50px;}

焦点textarea高度将增加:)简单的jquery

Answer 5

使用此插件＆gt; http://plugins.jquery.com/project/elastic

非常简单有效！

Answer 6

基于doog abides comment使用jQuery，我增强了代码，根据内容的长度自动调整大约行数，并在焦点丢失时返回1。

HTML：

<textarea class="expand" rows="1" cols="10"></textarea>

jQuery的：

$('textarea.expand').focus(function () {
    $(this).animate({rows: Math.max(1,Math.ceil($(this).val().length/this.cols))}, 500);
});
$('textarea.expand').blur(function () {
    $(this).animate({rows: 1}, 500);
    //Resize back to one row if the textarea is manually resized via the handle
    $(this).css({height: ''});
    $(this).css({width: ''});
});

Answer 7

您只能使用position: absolute和:focus选择器对CSS进行此操作，<div class="textarea"><textarea></textarea></div> div.textarea { height: 50px; width: 400px; }将使其浮在其他元素上，而textarea { position: absolute; height: 50px; width: 400px; transition: all 200ms; }选择器将仅在元素具有焦点时才应用。首先，您需要保留将textarea大小包含在元素中的大小：

textarea:focus {
   z-index: 1001;
   min-height:250px;
}

然后设置未聚焦的文本区域的样式

$(function() {
          $("#slider-range").slider({
            range: true,
            min: 50,
            max: 54,
            values: [50, 54],
            stop: function(event, ui) {
              var selected = [];
              $('input:checkbox[name=temple]').prop("checked", false);
              $("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]);

              for (var i = ui.values[0]; i <= ui.values[1]; i++) {
                selected.push(i);
              }
              $.each(selected, function(index, value) {
                $("input:checkbox[name=temple][value=" + value + "]").prop("checked", true);
                $("input:checkbox[name=temple][value=" + value + "]").trigger("change");
              })

            }
          });
          $("#amount").val("$" + $("#slider-range").slider("values", 0) +
            " - $" + $("#slider-range").slider("values", 1));

        $('input:checkbox[name=temple]').on('change', function() {
          if ($(this).prop("checked")){
            console.log('Checked');
          } else {
            console.log('Un Checked');
          }
        });
});

最后是专注的人

public class TestActivity extends AppCompatActivity {

private TextView mTextView;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_test);

    mTextView = findViewById(R.id.test_text);
}

@Override
protected void onResume() {
    super.onResume();
    test2();
}

private void test2() {
    mTextView.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            new Thread() {
                @Override
                public void run() {
                    try {
                        Thread.sleep(1000);
                    } catch (InterruptedException e) {
                        e.printStackTrace();
                    }
                    Util.log("AAA thread name " + Thread.currentThread().getName());

                    mTextView.setText("AAA");
                }
            }.start();
        }
    });
}

提琴：http://jsfiddle.net/7v60su9e/

Answer 8

<textarea style="width:200px; height:50px;" id="ta"></textarea>

var ta = document.getElementById('ta');
ta.onclick = function(){
    this.style.height = "400px";
}

快速小提琴：http://jsfiddle.net/n6sgT/

Answer 9

您可以执行以下操作：

<textarea name="textBox" rows="1" cols="20" id="textBox" onfocus="document.getElementById('textBox').rows = 5;" >

单击时如何扩展文本区域

9 个答案: