Question

作为标题

在这里小提琴---＆gt; http://jsfiddle.net/DCjYA/2943/

$('#box').focus(function() {
    /*to make this flexible, I'm storing the current width in an attribute*/
    $(this).attr('data-default', $(this).height());
    $(this).animate({
        height: 150
    }, 'slow');
}).blur(function() {
    /* lookup the original width */
    var w = $(this).attr('data-default');
    $(this).animate({
        height: w
    }, 'slow');
});

我的想法是，基于小提琴，每当用户点击输入时，输入将自动增加其高度，使其看起来像textarea类型的输入，但同时不推送文本输入向下。

我尝试在焦点上添加z-index到输入但不起作用。当输入扩展时，文本仍然向下推。我想要它，这样当输入扩展时，它看起来好像输入重叠了文本。

那么我怎样才能做到这一点？或者是否有任何插件执行与我上面的想法类似的事情？

Answer 1

我更新了你的小提琴 http://jsfiddle.net/DCjYA/2948/

HTML：

<div style = "position:relative;" id="textboxwrapper" onload="textboxload()">
  <textarea type="text" id="box" style="width: 100px; position:absolute; z-index: 100; height:20px; resize: none;"></textarea>
</div>

<div>This is just a test</div>

JS：

$(document).ready( function() {
  $('#textboxwrapper').css('height', $('#box').height());
});

$('#box').focus(function()
{
  /*to make this flexible, I'm storing the current width in an attribute*/
  $(this).attr('data-default', $(this).height());
  $(this).animate({ height: 150 }, 'slow');
}).blur(function()
{
  /* lookup the original width */
  var w = $(this).attr('data-default');
  $(this).animate({ height: w }, 'slow');
});

自动扩展输入框而不会打扰其他块

1 个答案: