1

我有一个带有 css 规则的 textarea，它在聚焦时会改变它的高度。不幸的是，单击事件在 textarea 失去焦点之前注册了它的位置，但是在 textarea 失去焦点之后事件才被执行，因此按钮不在同一位置。

这种行为似乎是跨浏览器一致的，我已经在 FF、Chrome 和 Opera 中尝试过。这应该被认为是一个错误，我该如何规避这个问题？

html: 

<form>  
    <textarea></textarea><br/>
    <input type="button" value="Create" onclick="alert('clicked!'); return false;">
</form>

CSS：

TEXTAREA:focus {
    height: 120px;
}
4

2 回答 2

1

您可以使用 CSS 转换并设置延迟。或者您可以执行 javascript 并设置超时。

它正在做它应该做的事情，它失去焦点，盒子尺寸缩小，然后它处理点击。为什么不让 onfocus 事件永久添加一个 height:120 类，如果您愿意，可以使用“Less”按钮使框再次变小。

于 2013-11-07T20:10:02.767 回答
1

我能想到的唯一真正的解决方案是稍微延迟调整大小。像这样的东西（jquery）：

$("textarea").focus(function(){
      $(this).css("height", "200px");  
}).blur(function(){
    var $this = $(this);

    setTimeout(function(){
        $this.css("height", "50px"); 
    },100);
});

http://jsfiddle.net/FcCca/

或者，一个 CSS 过渡解决方案：

textarea {
    transition-property: height;
    transition-duration: .1s;
    transition-timing-function: step-end;
    height: 20px;
}

textarea:focus{
    height: 200px;
}

http://jsfiddle.net/FcCca/2/

于 2013-11-07T20:11:26.010 回答