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

Click position registered before focus lost but event run after focus lost

本文关键字：焦点 事件 运行 注册 单击 位置      更新时间：2023-09-26

我有一个带有 css 规则的文本区域，当聚焦时会改变它的高度。遗憾的是，单击事件在文本区域失去焦点之前注册它的位置，但事件在文本区域失去焦点后执行，因此按钮不在同一位置。

这种行为似乎是跨浏览器一致的，我已经在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/

您可以使用CSS过渡并设置延迟。 或者你可以做JavaScript并设置超时。

它

正在做它应该做的事情，它失去了焦点，盒子缩小了大小，然后它处理了点击。 为什么不让 onfocus 事件永久添加一个 height：120 类，如果你愿意，有一个"更少"按钮来再次缩小框。

相关文章：