So entfernen Sie den Standardwert für die Eingabe im Fokus

Question

Ich habe ein Eingabefeld, dem der Standardwert Text zugewiesen ist. Wie kann ich diesen Text entfernen, wenn der Benutzer auf dem Feld konzentriert ::

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

Das sollte es tun.

aktualisiert, vergessen diesen Fokus nicht für den Fokus-out-Ereignis keinen zweiten Parameter haben, weil es keine gibt, hat es mit Unschärfe gekettet werden:

http://jsfiddle.net/hDCsZ/

Sie auch über das Erstellen Ihrer denken sollten eigene Funktion für dieses wie:

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

verwenden Sie dann wie so

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

Answer 2

Sie es auf diese Weise nicht tun. Verwenden Sie ein jQuery-Wasserzeichenskript: http://code.google.com/p/jquery-watermark/

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

Es gibt eine Menge Dinge, die Sie berücksichtigen müssen, wenn Sie es manuell tun. Was passiert zum Beispiel, wenn das Textfeld den Fokus verliert? Wenn es keinen Wert gibt, möchten Sie Ihren Hilfstext lesen. Wenn dies der Fall ist, sollten Sie diese Änderungen berücksichtigen.

einfach leichter, andere Menschen zu tun zu lassen, die schwere Heben :)

Answer 3

Mit HTML5 können Sie es ohne Javascript machen: Verwenden Sie einfach placeholder statt value. Ich denke, es ist eine nette Ergänzung, aber natürlich müssen Sie zuerst die Browser-Kompatibilität prüfen.

Answer 4

HTML:

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

Javascript-Code:

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

Das ist alles, ich hoffe, es hilft.

Answer 5

var defaultForInput = "abc";

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

---

Wenn Ihr Formular einreichen, prüfen Sie, ob die Eingabe (id = "myTextInput") Wert ist der 'leer-String', wenn so ersetze sie (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

Der Super Duper Short Version

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

Answer 8

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

Ich denke, das

Answer 9

Plain JavaScript helfen:

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

Dieser Wert hält in den Platzhalter, anstatt ihn vollständig zu entfernen. Wenn Ihnen das nicht gefällt, entfernen Sie die Platzhalterzeile.