Văn bản mặc định của JQuery trên hộp văn bản trống

Question

Tôi có một hộp văn bản biểu mẫu email trong khi nó trống. Tôi muốn nó có giá trị "E-Mail" Và khi bạn nhấp vào văn bản sẽ biến mất. Nếu ai đó nhấp vào nó và không nhập văn bản. trên Blur Tôi muốn cho nó trở lại để có văn bản mặc định.

Tôi đã thử một vài thứ nhưng không có gì hoạt động. Làm ơn ai đó có thể chỉ cho tôi đúng hướng?

Answer 1

It's pretty straightforward. Chỉ cần xóa giá trị onfocus và sau đó (nếu giá trị vẫn trống) hãy nạp lại onblur.

Answer 2

Gọi hàm bên dưới và chuyển nó hai arg: lightLabel (jQuery ('# email_field'), 'email');

function slightLabel(input, text) { 
     jQuery(input).val(text); 
     jQuery(input).data('defaultText', text); 
     jQuery(input).focus(function(){ 
      if(!jQuery(this).data('touched')) 
      { 
       jQuery(this).data('touched', true); 
       jQuery(input).val(''); 
      } 
     }); 

     // the part to restore the original text in 
     jQuery(input).blur(function(){ 
      if(jQuery(this).val() == '') 
      { 
       jQuery(this).val(jQuery(this).data('defaultText')); 
      } 
     }); 

    } 

Answer 3

Bạn có thể sử dụng một trong các plugin watermark của jquery làm điều đó. Tôi sử dụng plugin watermark có mã sau đây

$.fn.watermark = function (c, t) { 
var e = function (e) { 
    var i = $(this); 
    if (!i.val()) { 
     var w = t || i.attr('title'), $c = $($("<div />").append(i.clone()).html().replace(/type=\"?password\"?/, 'type="text"')).val(w).addClass(c); 
     i.replaceWith($c); 
     $c.focus(function() { 
      $c.replaceWith(i); setTimeout(function() { i.focus(); }, 1); 
     }) 
      .change(function (e) { 
       i.val($c.val()); $c.val(w); i.val() && $c.replaceWith(i); 
      }) 
      .closest('form').submit(function() { 
       $c.replaceWith(i); 
      }); 
    } 
}; 
return $(this).live('blur change', e).change(); 

};

Callable trong jquery bằng cách thiết lập các lớp của hộp văn bản đầu vào để watermark như thế này

<input type="text" id="keyword" name="keyword" class="watermark" style="width: 250px" 
    title="Type keyword here" /> 

Tiêu đề này là những gì sẽ được hiển thị trong hình mờ.

Answer 4

nó đi một cái gì đó như thế này

$('#yourElement').focus(function(){ 
    //Check val for email 
    if($(this).val() == 'E-Mail'){ 
     $(this).val(''); 
    } 
}).blur(function(){ 
    //check for empty input 
    if($(this).val() == ''){ 
     $(this).val('E-Mail'); 
    } 
}); 

Answer 5

Hoặc bạn chỉ có thể sử dụng thuộc tính placeholder html5:

<input type="text" id="keyword" name="keyword" placeholder="Type keyword here" /> 

Answer 6

bạn có thể sử dụng thuộc tính placeholder và sau đó chúng tôi jquery này như sao lưu cho IE

<input type="text" id="keyword" name="keyword" placeholder="The watermark" value='The watermark' class="watermark"/> 

$(document).ready(function() { 
    $('.watermark').focus(function() { 
     if ($(this).val() == $(this).attr('placeholder')) { 
      $(this).val(''); 
     } 
    }).blur(function() { 
     if ($(this).val() == '') { 
      $(this).val($(this).attr('placeholder')); 
     } 
    }); 
}); 

Answer 7

Sử dụng số này Jquery-placeholder plugin

Sử dụng plugin này làm cho nó cũng có thể sử dụng thuộc tính giữ chỗ trong các trình duyệt không có khả năng HTML5.