1

フォーカス時に高さを変更する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;
}
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 に答える