1

3 つの入力があります。それらをすべて同じ幅で開始および終了させたいのですが、そのうちの1つがクリックされた場合、その幅を増やし、他のすべての幅を減らしたいと思います。1 つの入力がフォーカスされていて、他の入力がフォーカスされていないが、まだぼやけていない場合、入力に新しいクラスを適用する方法はありますか?

ある種の作業モデルはhttp://testserver1.staceylanehosting.netにあります。

ここに私のjQueryコードがあります:

    $(document).ready(function() {
$('#wrapper-newsletter input[type="text"]').addClass("idleField");
$('#wrapper-newsletter input[type="text"]').focus(function() {
    $(this).removeClass("idleField").addClass("focusField");
    if (this.value == this.defaultValue){
        this.value = '';
    }
    if(this.value != this.defaultValue){
        this.select();
    }
});
$('#wrapper-newsletter input[type="text"]').blur(function() {
    $(this).removeClass("focusField").addClass("idleField-shrink");
    if ($.trim(this.value == '')){
        this.value = (this.defaultValue ? this.defaultValue : '');
    }
});

});

HTMLマークアップは次のとおりです。

        <div id="wrapper-newsletter" class="grid_8">
    <h4>Receive Updates</h4>
    <p>To recieve notifications when our site is updated, enter your email address and name below!</p>
    <form>
        <input type="text" class="idleField" name="newsletter-name" value="Name" />
        <input type="text" class="idleField" name="newsletter-surname" value="Surname" />
        <input type="text" class="idleField" name="newsletter-email" value="Email" />
        <a href="#" title="Subscribe" class="button-blue">
            <span>Subscribe</span>
        </a>
    </form>
</div><!-- div#wrapper-newsletter -->

そして関連する CSS:

    #wrapper-newsletter input[type=text] { width: 102px; }
    .idleField { }
    .idleField-shrink{ width: 63px !important; }
    #wrapper-newsletter input[type=text]:focus { width: 180px; }
4

3 に答える 3

0

JavaScriptには、まだ焦点が合っていない/ぼやけていないものと、焦点が合っていない/ぼやけていないものの違いについての認識はないと思います。focus()使用するだけで、求めていることを達成するのは簡単ですblur()。

$('input').focus(
    function(){
        $(this).addClass('focused');
    }).blur(
    function(){
        $(this).removeClass('focused');
    });

JSフィドルデモ。

フォーカス/ブラーイベントがある要素とない要素を視覚的に区別する必要がある場合は、クラス名（私の例ではhasHadFocusクラス）を使用することをお勧めします。

$('input').focus(
    function(){
        $(this).addClass('focused');
    }).blur(
    function(){
        $(this).removeClass('focused').addClass('hasHadFocus');
    });

JSフィドルデモ。

これは概念実証にすぎません。使用する必要のある特定の幅を設定するのはあなたに任せます。

参照：

于 2011-10-23T00:49:54.527 に答える