jQuery-Skript zum Löschen von Eingabefeldern

  • Ich habe versucht, ein jQuery-Skript zu schreiben, in dem das Leerzeichen gelöscht wird, wenn jemand auf die Eingabe klickt. Wenn dann nichts eingegeben wird, wird es wieder angezeigt.

    Das ist was ich mir ausgedacht habe. Gibt es einen besseren Weg, dies zu tun? Wenn ja, warum ist es besser?

     $(document).ready(function() {
                // set all input.text default value according to alt attribute
                $("input.contactStyle").each(function(){
                    $(this).val($(this).attr("alt"));
                });
    
                // clear input.text on focus, if still in default
                $("input.contactStyle").focus(function() {
    
                    if($(this).val()==$(this).attr("alt")) {
                        $(this).val("");
                    }
                });
    
                // if field is empty afterward, add text again
                $("input.contactStyle").blur(function() {
                    if($(this).val()=="") {
                        $(this).val($(this).attr("alt"));
                    }
                });
    
                // set all input.text default value according to alt attribute
                $("textarea.contactStyle").each(function(){
                    $(this).val($(this).attr("title"));
                });
    
                // clear input.text on focus, if still in default
                $("textarea.contactStyle").focus(function() {
    
                    if($(this).val()==$(this).attr("title")) {
                        $(this).val("");
                    }
                });
    
                // if field is empty afterward, add text again
                $("textarea.contactStyle").blur(function() {
                    if($(this).val()=="") {
                        $(this).val($(this).attr("title"));
                    }
                });
    });
     
    16 January 2016
    QuillNaveenBhat
2 answers
  • Es scheint, als würden Sie versuchen, die Funktionalität des placeholder wiederherzustellen. Attribut, das in HTML5 vorhanden ist. Bei Browsern, die dies unterstützen - und das sind alle modernen Browser mit Ausnahme von IE9 (glaube ich) - kann der vorstehende Code beispielsweise durch Folgendes ersetzt werden:

     <input type="text" class="contactStyle" placeholder="Your placeholder text">
     

    Wenn Sie diese Funktion auch in weniger modernen Browsern verwenden möchten, ist JavaScript erforderlich, das Rad jedoch nicht neu zu erfinden. Mehrere Polyfills wurden von anderen Personen geschrieben, die das Attribut placeholder zulassen unabhängig vom Browser. Auf dieser Seite sind mehrere aufgeführt. .

    08 December 2011
    Jordan
  • Sie können Ihr Ziel einfach erreichen, indem Sie dieses einfache Plugin verwenden. jQuery clearfield . Dieses Plugin ist sehr einfach und einfach zu verwenden

    08 December 2011
    Kamran Ali