Question

到目前为止，使用contenteditable代码with the autogrow feature of a textbox上的<div>属性。 height transition of it也是widget_categories_args。这一切都很好，除了一件事，删除字符，特定的，一条线，不会动画它的高度，不像添加新的行。我对CSS还有一点了解。

＆＃13;

.autogrow {
  border: 1px solid rgb( 0, 0, 0 );
  padding: 10px;
}
@keyframes line_insert {
  from {
    height: 0px;
  }
  to {
    height: 20px;
  }
}
.autogrow[contenteditable] > div {
  animation-duration: 250ms;
  animation-name: line_insert;
}
.autogrow[contenteditable] {
  overflow: hidden;
  line-height: 20px;
}

＆＃13;

<div class="autogrow" contenteditable="true"></div>

＆＃13;

当我按 Shift + Enter 时，它也没有动画，虽然在按 Enter 时效果很好。在输入新行时，只需删除行和 Shift + Enter 组合键即可。

如何让它发挥作用？可以使用纯CSS完成吗？或者为它添加一个javascript函数？

Answer 1

为了避免这些问题，我个人使用的解决方案不是基于纯CSS动画/过渡，我发现它总是有问题。例如，在你的CSS实现中，如果使用 Enter 太快（你可以减慢动画速度以便更好地看到它），就会产生反弹效果。

此外，新的行处理在浏览器之间有所不同，有些会添加<div><br></div>，有些版本的IE只会添加<br>等。

我从来没有能够解决所有这些问题，或者找到了解决所有这些问题的实现，所以我决定不修改contenteditable的所有行为，让浏览器做的就是魔术而是对发生的事情做出反应。

我们甚至不必担心像 Shift + Enter 这样的键事件或删除等事件，所有这些事件都由本地处理导航仪。

我选择使用2个元素：一个用于实际contenteditable，另一个用于我contenteditable的样式，它将是具有基于{的实际高度的高度动画/过渡的元素{1}}。

要做到这一点，我会监控每一个可以改变contenteditable高度的事件，如果我的样式元素的高度不一样，我会＆＃39 ; m动画样式元素。

＆＃13;

contenteditable

＆＃13;

var kAnimationSpeed = 125;
var kPadding = 10;

$('div[contenteditable]').on('blur keyup paste input', function() {
  var styleElement = $(this).prev();

  var editorHeight = $(this).height();
  var styleElementHeight = styleElement.height();

  if (editorHeight !== styleElementHeight - kPadding * 2) {
    styleElement.stop().animate({ height: editorHeight + kPadding * 2 }, kAnimationSpeed);
  }
});

＆＃13;

.autogrowWrapper {
  position: relative;
}

.autogrow {
  border: 1px solid rgb(0, 0, 0);
  height: 40px; /* line-height + 2 * padding */
}

div[contenteditable] {
  outline: none;
  line-height : 20px;
  position: absolute;
  top: 10px; /* padding */
  left: 10px; /* padding */
  right: 10px; /* padding */
}

＆＃13;

Answer 2

有点黑客，但它确实有效。

首先，修改你的CSS

.autogrow {
  border: 1px solid rgb( 0, 0, 0 );
  padding: 10px;
}
@keyframes line_insert {
  from {
    height: 0px;
  }
  to {
    height: 20px;
  }
}
.autogrow[contenteditable] > div {
  animation-duration: 250ms;
  animation-name: line_insert;
}
.autogrow[contenteditable] {
  overflow: hidden;
  line-height: 20px;
}

然后添加这个检测 Shift + Enter 事件的jQuery，并在发生时附加div

$(".autogrow").keydown(function(e){

    if (e.keyCode == 13 && e.shiftKey || e.keyCode == 13)
    {
       $(this).animate({height: $(this).height()+20},200);
                $(this).append('<div><br></div>');
    }
});

这应该有用。

检查小提琴https://jsfiddle.net/wx38rz5L/582/

可转换的高度转换：添加（shift + enter）和删除一行文本

2 个答案: