Измените существующий jQuery, чтобы сделать заполнитель диапазона - PullRequest
Новая
       10

Измените существующий jQuery, чтобы сделать заполнитель диапазона

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

У меня есть некоторый jQuery, который обеспечивает заполнитель, если мой <label for=""> соответствует имени и идентификатору input Однако это не так, поэтому я решил использовать вместо заполнителя <span>. Может ли кто-нибудь помочь изменить мой jQuery, чтобы сделать «держатель 1009 * класса», который я использую, работой? Цель состоит в том, чтобы заполнитель оставался в фокусе, исчезал при наличии ввода, а затем снова появлялся при исчезновении.

Вот HTML-код, который я использую: 

<div id="placeholder">
  <span class="holder">This is the placeholder...</span>
  <%= f.text_area :body, :id =>"Placeholder" %>
</div>

И мой текущий JQuery: 

$(document).ready(function() {
    $('textarea').keyup(function() {
        if ($(this).val().length) {
            $('label[for="' + $(this).attr('name') + '"]').hide();
        } else {
            $('label[for="' + $(this).attr('name') + '"]').show();
        }
    });
});

Спасибо!

Ответы [ 2 ]

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

Вы хотите привязаться к событиям focus и blur и абсолютно позиционировать <span> над <textarea>.Начнем с некоторого CSS: 

#placeholder {
    position: relative;
}

.holder {
    position: absolute;
    top: 2px;
    left: 2px;
    display: none;
}

А затем jQuery: 

$('.holder').click(function() {
    $(this).siblings('textarea').focus();
});
$('#Placeholder').focus(function() {
    $(this).siblings('.holder').hide();
});
$('#Placeholder').blur(function() {
    var $this = $(this);
    if($this.val().length == 0)
        $(this).siblings('.holder').show();
});
$('#Placeholder').blur();

Последний вызов $('#Placeholder').blur() для инициализации состояния <span>, так что он будетв правильном состоянии, если <textarea> начинается с содержимого.

И короткая демонстрация: http://jsfiddle.net/ambiguous/PLrf3/1/

Кстати, наличие id="placeholder" и id="Placeholder" на одной странице может привестив некотором замешательстве.Вам лучше выбрать стандартную схему (camelCase, words-and-hyphens или любую другую) для своих атрибутов id и придерживаться ее.Разница в регистре может сбить с толку и выглядеть как опечатка.

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

Примерно так должно работать: 

$(function() {
    $("span.holder + textarea").keyup(function() {
        if($(this).val().length) {
            $(this).prev('span.holder').hide();
        } else {
            $(this).prev('span.holder').show();
        }
    });        
});

Это должно работать для всех текстовых полей на странице, если перед ними стоит span.holder.

...