Question

我有一个带有css规则的textarea，可以在聚焦时改变它的高度。不幸的是，click事件在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;
}

Answer 1

您可以使用css转换并设置延迟。或者你可以做javascript并设置超时。

它正在做它应该做的事情，它失去焦点，盒子大小下降，然后它处理点击。为什么不让onfocus事件永久地添加一个高度：120级，如果你愿意，可以使用“Less”按钮使框再次变小。

Answer 2

我能想到的唯一真正的解决方案是为调整大小添加一点延迟。这样的东西（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/

单击焦点丢失前注册的位置，但焦点丢失后事件运行

2 个答案: