javascript - 在失去焦点之前注册点击位置，但在失去焦点之后运行事件

我有一个带CSS规则的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;
}

最佳答案

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

关于javascript - 在失去焦点之前注册点击位置，但在失去焦点之后运行事件，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/19845504/