JQuery удалить текст на фокусе

Question

Я пытался использовать значение по умолчанию при вводе текста, а затем с помощью jQuery, когда вы «фокусируете» текстовое поле, текст становится черным (по умолчанию светло-серый) и удаляется значение по умолчанию. Я думаю, вы знаете, о чем я говорю, так вы знаете, как этого добиться?

Answer 1

<input class="txtClass" type="text" defaultVal="Enter your Name" />
<input class="txtClass" type="text" defaultVal="Enter your Designation" />

Javascript

$('body').ready(function(){
  $('.txtClass').each( function () {
    $(this).val($(this).attr('defaultVal'));
    $(this).css({color:'grey'});
      });

  $('.txtClass').focus(function(){
    if ( $(this).val() == $(this).attr('defaultVal') ){
      $(this).val('');
      $(this).css({color:'black'});
    }
    });
  $('.txtClass').blur(function(){
    if ( $(this).val() == '' ){
      $(this).val($(this).attr('defaultVal'));
      $(this).css({color:'grey'});
    }
    });
});

См. Рабочий пример: http://jsbin.com/ovida3
http://jsbin.com/ovida3/2

Answer 2

Плагин jquery watermark позволяет достичь желаемого эффекта.

Answer 3

То, что я сейчас использую для ввода значений города. На фокусе это удаляет значение. В случае размытия (не сфокусировано) возвращает значение по умолчанию, но информирует пользователя о необходимости.

CSS

`.red{color:red;}​`

HTML

<input type="text" class="city" value="City" id="oCity" name="oCity"></input>
<label class="oCity red"></label>
<input type="text" class="city" value="City" id="dCity" name="dCity">
<label class="dCity red"></label>​
<input type="text" class="city" value="City" id="dCity" name="dCity">
<label class="dCity red"></label>​

JQuery

$(document).ready(function() {
var defaultVal = 'City';
$('.city').focus(function() {
    $(this).val('');
});
 $('.city').blur(function(){
    var Value = $(this).val();
    var oId = $(this).attr('id');
    if(Value == '')
    {
        $(this).val(defaultVal);
        $('.'+oId).text('Required');
    }           
});
});​

Answer 4

$('input:text').bind({
    focus: function () {
        var self = $(this);

        if (self.val() == self.attr('defaultValue')) {
            self.val('').removeClass('default');
        };
    },
    blur: function () {
        var self = $(this),
            val = jQuery.trim(self.val());

        if (val == "" || val == self.attr('defaultValue')) {
          self.val(self.attr('defaultValue')).addClass('default');  
        };
    }
}).trigger('blur');

У вас есть класс CSS default, который устанавливает цвет текста на ваш вкус.

Пример использования: http://www.jsfiddle.net/2S9hW/

1009 *

Answer 5

Вы также можете использовать плагин Google Watermark следующим образом:

Загрузите последний скрипт jQuery:

http://jquery.com/download/

Загрузите плагин Watermark:

https://code.google.com/p/jquery-watermark/

========== голова ==========

<script type="text/javascript" src="scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="scripts/jquery.watermark.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $(function () {
        $("#input-name").watermark("Your name");
        $("#input-email").watermark("Your e-mail address");
    });
});
</script>

========== body ==========

<div id="wrap-contact">
<form id="form-contact" name="form-contact" method="post" action="">
<div id="layer-email">
<input type="text" name="input-email" id="input-email" />
</div>
<div id="layer-name">
<input type="text" name="input-name" id="input-name" />
</div>
</form>
</div>

========== CSS ==========

/*
========================
form styles
========================
*/
#wrap-contact {
    margin: auto;
    width: 760px;
}
#layer-email {
    float:left;
    width:340px;
    padding:2px;
    background:#ccc url(images/user.png) no-repeat 98% 50%;
}
#layer-name {
    float:right;
    width:340px;
    padding:2px;
    background:#ccc url(images/email.png) no-repeat 98% 50%;
}
#input-email {
    width: 260px;
    font: 18px Arial, Helvetica, sans-serif;
    border:1px solid #fff;
    padding: 4px;

}
#input-name {
    width: 260px;
    font: 18px Arial, Helvetica, sans-serif;
    border:1px solid #fff;
    padding: 4px;
}

/*
========================
watermark styles
========================
*/
.watermark {color: #999 !important;}

Answer 6

Вы в основном создаете то, что поддерживает атрибут placeholder текстового элемента HTML5. Поэтому вы должны просто использовать атрибут placeholder и затем проверить, поддерживает ли браузер функциональность placeholder:

function supports_input_placeholder() {
    var i = document.createElement('input');
    return 'placeholder' in i;
}
if (!support_input_placeholder()) {
    $(':text').focus(function(){
        var self = $(this);
        if (self.val() == self.attr('placeholder')) {
            self.val('');
        }
    }).blur(function(){
        var self = $(this),
            value = $.trim(self.val());
        if(val == '') {
            self.val(self.attr('placeholder');
        }
    });
}

<input type="text" name="desc" placeholder="My Email Account">