Giá trị mặc định đầu vào rõ ràng jquery

Làm cách nào để xóa giá trị mặc định của biểu mẫu đầu vào khi lấy nét bằng jquery và xóa nó một lần nữa khi nhấn nút gửi?Giá trị mặc định đầu vào rõ ràng jquery

<html> 
     <form method="" action=""> 
      <input type="text" name="email" value="Email address" class="input" /> 
      <input type="submit" value="Sign Up" class="button" /> 
     </form> 
</html> 

<script> 
$(document).ready(function() { 
    //hide input text 
    $(".input").click(function(){ 
     if ($('.input').attr('value') == ''){ 
      $('.input').attr('value') = 'Email address'; alert('1');} 
     if ($('.input').attr('value') == 'Email address'){ 
      $('.input').attr('value') = ''} 
    }); 
}); 
</script>

Nguồn

2012-08-01 viktor

Bạn có thể sử dụng thuộc tính 'trình giữ chỗ 'gốc để thay thế không? Có nhiều [polyfills] (https://github.com/jamesallardice/Placeholders.js) có sẵn để làm cho nó hoạt động trong các trình duyệt cũ hơn. –

@JamesAllardice Tại sao bạn không đăng nó như một câu trả lời? Tôi nghĩ là giải pháp dễ nhất và tốt nhất. – jelies

@jelies - Tôi đã không đăng nó như là một câu trả lời bởi vì trong khi nó làm điều tương tự như những gì OP đang cố gắng làm, nó không thực sự trả lời những gì sai với mã của họ. Nhưng tôi đồng ý, đó chắc chắn là giải pháp đơn giản nhất! –

Bạn có thể sử dụng này ..

<body> 
    <form method="" action=""> 
     <input type="text" name="email" class="input" /> 
     <input type="submit" value="Sign Up" class="button" /> 
    </form> 
</body> 

<script> 
    $(document).ready(function() { 
     $(".input").val("Email Address"); 
     $(".input").on("focus", function() { 
      $(".input").val(""); 
     }); 
     $(".button").on("click", function(event) { 
      $(".input").val(""); 
     }); 
    }); 
</script>

Talking mã riêng của bạn, vấn đề là các api attr của jquery được thiết lập bởi

$('.input').attr('value','Email Adress');

và không phải là bạn đã làm:

$('.input').attr('value') = 'Email address';

Nguồn

2012-08-01 09:57:25 Kaustubh

Tôi đã quyết định sử dụng câu trả lời này vì nó có vẻ thanh lịch nhất. – viktor

thnx.i bản thân tôi mới đến jquery.this là lần đầu tiên tôi chấp nhận anser ở đây, và thứ ba tổng thể (như bạn có thể có thể suy ra bởi các điểm danh tiếng của tôi) – Kaustubh

Tại sao '$ ('. Input'). RemoveAttr ('value')' không hoạt động? –

Hãy thử rằng:

var defaultEmailNews = "Email address"; 
    $('input[name=email]').focus(function() { 
    if($(this).val() == defaultEmailNews) $(this).val(""); 
    }); 

    $('input[name=email]').focusout(function() { 
    if($(this).val() == "") $(this).val(defaultEmailNews); 
    });

Nguồn

2012-08-01 08:10:24 tekilatexee

$('.input').on('focus', function(){ 
    $(this).val(''); 
}); 

$('[type="submit"]').on('click', function(){ 
    $('.input').val(''); 
});

Nguồn

2012-08-01 08:11:02 Faust

Trừ khi bạn thực sự lo lắng về trình duyệt cũ hơn, bạn chỉ có thể sử dụng các placeholder html5 mới thuộc tính như sau:

<input type="text" name="email" placeholder="Email address" class="input" />

Nguồn

2012-08-01 08:12:07

"Trừ khi bạn thực sự lo lắng về trình duyệt cũ" ... bạn có thể polyfill thuộc tính 'placeholder' để nó hoạt động trong các trình duyệt cũ hơn. Xem bình luận của tôi về câu hỏi, và xem [Modernizr wiki] (https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills) cho các ví dụ khác. –

Vâng, đó là sự thật, hoặc bạn chỉ có thể viết một chút JQuery để tự kéo thuộc tính nếu bạn muốn. –

$(document).ready(function() { 
    //... 
//clear on focus 
$('.input').focus(function() { 
    $('.input').val(""); 
}); 
    //clear when submitted 
$('.button').click(function() { 
    $('.input').val(""); 
});

});

Nguồn

2012-08-01 08:12:35

Điều này sai '$ ('. Input'). Attr ('value') = 'Địa chỉ email';', phải là '$ ('. Input'). Attr ('value', 'Email address'); 'câu trả lời này được upvoted như thế nào? –

@ToniMichelCaubet Đã chỉnh sửa câu trả lời, cảm ơn bạn. Mã đó không liên quan đến câu hỏi. Tôi đã sao chép nó từ mã của chủ đề. –

Chỉ cần viết tắt

$(document).ready(function() { 
    $(".input").val("Email Address"); 
     $(".input").on("focus click", function(){ 
      $(this).val(""); 
     }); 
    }); 
</script>

Nguồn

2015-08-21 19:11:46

Giá trị mặc định đầu vào rõ ràng jquery

Trả lời

Các vấn đề liên quan