Входные данные jQuery сфокусированы, размыты и все промежуточное - PullRequest
Новая
       27

Входные данные jQuery сфокусированы, размыты и все промежуточное

1 голос
/ 23 октября 2011

У меня есть три входа.Я хочу, чтобы все они начинались и заканчивались с одинаковой шириной, но в случае щелчка по одному из них я хочу, чтобы он увеличивал ширину, а ВСЕ ДРУГИЕ - уменьшал ширину.Есть ли способ, которым, если один вход сфокусирован, а другие НЕ сфокусированы, но НЕ размыты, я могу применить новый класс к входам?

Вид рабочей модели можно найти по адресу: 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; }

Ответы [ 3 ]

0 голосов
/ 23 октября 2011

Я не думаю, что JavaScript имеет какое-либо восприятие разницы между не сфокусированным / не размытым пока и не сфокусированным / не размытым. Достаточно просто добиться того, что вы просите, используя focus() и blur(): 

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

JS Fiddle demo .

Если вам нужно визуально различать элементы, которые имеют и не имеют событий фокуса / размытия, я бы предложил использовать имя класса (в моем примере класс hasHadFocus): 

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

Демонстрация JS Fiddle .

Это всего лишь подтверждение концепции, я оставляю вам возможность указать конкретную ширину, которую вам нужно использовать.

Ссылки:

0 голосов
/ 30 октября 2011

Разобрался. Если вам интересно увидеть результат или вы ищете ответ на вопрос:

http://jsfiddle.net/stacigh/q8T7r/3/

0 голосов
/ 23 октября 2011

Может быть проще сделать в основном с помощью css: 

.idleField { }
.idleField-shrink{ width: 63px !important; }
.idleField-shrink:focus{ width: 120px !important; }

Затем с помощью onClick () вы можете установить все входные данные для класса .idleField-shrink.

...