3

私は最近、フォームの要素に CSS3 フォーカス スタイルを追加しました (書き込みスペースを増やすために垂直方向に大きくなります)。ただし、ユーザーが送信ボタンをクリックすると、テキストエリアはフォーカスを失い (縮小します)、フォームは送信されず、ユーザーは再度送信をクリックする必要があります。これに対する解決策はありますか？

形：

<form name="postForm" id="post_form" onsubmit="return validate()" action="post.php" method="post" enctype="multipart/form-data">
    <textarea name="post" onkeydown="update()" onkeyup="update()" placeholder='Write Post...' id="post_area" ></textarea>
    <div id='post_extras'>
        <input class="admin_extra" id="post_button" type="submit" value="Post" />
        <input class="admin_extra" type="file" name="file" />
        <input class="admin_extra" placeholder="Image URL" type="url" name="url" />
        <div class="admin_extra" id='char_left'>5000 Characters Left</div>
    </div>
</form>

CSS:

#post_area{
height: 3em;
width: 100%;
display: block;
border: none;
box-sizing: border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
padding: 10px;
margin: 0;
transition: height 1s;
-moz-transition: height 1s;
-webkit-transition: height 1s;
-o-transition: height 1s;
}

#post_area:focus{
    height: 10em;
}
4

1 に答える 1

0

これが発生する理由は、テキスト コンテンツ領域からマウスを離すと、他の要素へのフォーカスが失われるためです。これが、投稿ボタンを 2 回クリックして有効にする必要がある原因です。回避策の 1 つは、テキストの入力を開始するときだけスライド効果を使用し、終了したら投稿することです。したがって、スライドバックはありません。これはjqueryで簡単にできます。クリックで投稿したい場合は、手動で聞く必要があります。

これは、次のコードで実行できます。

$("post_button").on('click', function(e) {
    e.stopPropagation();
    alert('clicked');
});

JSFiddleコード:

http://jsfiddle.net/txXaq/1/

于 2012-07-28T08:41:15.367 に答える