Come rimuovere il valore predefinito di input su focus

Question

Ho una casella di input a cui è stato assegnato un valore di default. Come posso rimuovere questo testo quando l'utente si concentra sul campo ::

CODE

<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); 
    }); 
})​ 

Che dovrebbe farlo.

aggiornamento, dimenticato che il fuoco non ha un secondo parametro per l'evento di messa a fuoco fuori perché non c'è nessuno, deve essere incatenato con sfocatura:

http://jsfiddle.net/hDCsZ/

si dovrebbe anche pensare di creare la vostra propria funzione di questo tipo:

$.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); 
     }); 
    }); 
} 

quindi utilizzare questo modo

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

Answer 2

Non farlo in questo modo. Utilizzare uno script di filigrana jQuery: http://code.google.com/p/jquery-watermark/

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

Ci sono molte cose che devi rendere conto se lo fai manualmente. Ad esempio, cosa succede quando la casella di testo perde l'attenzione? Se non c'è alcun valore, vorresti leggere il tuo testo di aiuto. Se c'è, vorresti onorare quei cambiamenti.

solo più facile lasciare che gli altri fanno il lavoro pesante :)

Answer 3

Con HTML5 si può fare senza Javascript: basta usare placeholder invece di value. Penso che sia una bella aggiunta, ma ovviamente è necessario verificare prima la compatibilità del browser.

Answer 4

HTML:

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

codice Javascript:

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

Questo è tutto, spero vi aiuterà.

Answer 5

var defaultForInput = "abc";

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

---

Quando presentando il modulo, controllare se l'ingresso (id = "myTextInput") valore è la 'stringa vuota', in tal caso sostituirlo con (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

Il Super Duper Versione breve

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

Answer 8

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

Penso che questo aiuterà

Answer 9

Plain JavaScript:

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

Ciò mantiene il valore nel il segnaposto invece di rimuoverlo completamente. Se non ti piace, rimuovi la linea del segnaposto.