Cách xóa giá trị đầu vào mặc định trên tiêu điểm

Question

Tôi có hộp nhập có văn bản giá trị mặc định được gán cho nó. Làm thế nào tôi có thể loại bỏ văn bản này khi người dùng tập trung vào lĩnh vực này ::

Mã

<input type="text" name="kp1_description" value="Enter Keypress Description"> 

Answer 1

$(document).ready(function(){ 
    var Input = $('input[name=kp1_description]'); 
    var default_value = Input.val(); 

    Input.focus(function() { 
     if(Input.val() == default_value) Input.val(""); 
    }).blur(function(){ 
     if(Input.val().length == 0) Input.val(default_value); 
    }); 
})​ 

Điều đó sẽ làm điều đó.

cập nhật, Quên rằng tập trung không có một tham số thứ 2 cho sự kiện trọng tâm-out vì chẳng có ai, nó phải được xích với mờ:

http://jsfiddle.net/hDCsZ/

bạn cũng nên suy nghĩ về việc tạo ra của bạn chức năng riêng cho điều này như:

$.fn.ToggleInputValue = function(){ 
    return $(this).each(function(){ 
     var Input = $(this); 
     var default_value = Input.val(); 

     Input.focus(function() { 
      if(Input.val() == default_value) Input.val(""); 
     }).blur(function(){ 
      if(Input.val().length == 0) Input.val(default_value); 
     }); 
    }); 
} 

Sau đó sử dụng như vậy

$(document).ready(function(){ 
    $('input').ToggleInputValue(); 
})​ 

Answer 2

Đừng làm điều đó theo cách này. Sử dụng tập lệnh watermark jQuery: http://code.google.com/p/jquery-watermark/

$("input[name='kp1_description']").watermark("Enter Keypress Description");

Có rất nhiều điều bạn phải tính đến nếu bạn thực hiện thủ công. Ví dụ, điều gì sẽ xảy ra khi hộp văn bản bị mất tiêu điểm? Nếu không có giá trị, bạn muốn readd văn bản trợ giúp của bạn. Nếu có, bạn muốn tôn vinh những thay đổi đó.

Chỉ cần dễ dàng để cho người khác làm các việc nâng nặng :)

Answer 3

Với HTML5, bạn có thể làm điều đó mà không cần Javascript: chỉ cần sử dụng placeholder thay vì value. Tôi nghĩ rằng đó là một bổ sung tốt đẹp, nhưng tất nhiên bạn cần phải kiểm tra khả năng tương thích trình duyệt đầu tiên.

Answer 4

HTML:

<form method="post"> 
    <input type="text" id="customer" value="Username"/>  
    <input type="Submit" value="Login" class="rc" /> 
</form> 

javascript mã:

<script> 
$('#customer').on({ 
    focus:function(){     
     if(this.value == 'Username') this.value = ''; 
    }, 
    blur:function(){ 
     if(this.value == '') this.value = 'Username'; 
    } 
}) 
</script> 

Đó là tất cả, tôi hy vọng nó sẽ giúp.

Answer 5

var defaultForInput = "abc";

<input id="myTextInput" type="text" placeholder=defaultForInput />

---

Khi gửi mẫu của bạn, kiểm tra xem các đầu vào (id = "myTextInput") giá trị là 'trống-string', nếu có thì thay thế nó với (defaultForInput) .

Answer 6

$('input, textarea').each(function() { 
    var Input = $(this); 
    var default_value = Input.val(); 

    Input.focus(function() { 
     if(Input.val() == default_value) Input.val(""); 
    }).blur(function(){ 
     if(Input.val().length == 0) Input.val(default_value); 
    }); 
}); 

Answer 7

Super Duper Short Version

$('#input_id').focus(function() { 
    $(this).val(""); 
}); 

Answer 8

<input type="text" id="anything" placeholder="enter keypress description"> 

tôi nghĩ rằng điều này sẽ giúp

Answer 9

Plain JavaScript:

(function() { 
    let input = document.querySelector ("input[name='kp1_description']"); 
    input.onfocus = function() { 
    this.placeholder = this.value; 
    this.value = ''; 
    }; 
})(); 

này giữ giá trị trong trình giữ chỗ thay vì xóa hoàn toàn trình giữ chỗ đó. Nếu bạn không thích điều này, hãy xóa dòng trình giữ chỗ.