2012-11-14 9 views
5

HTMLjQuery .focus() hervorhebt alle vorgefüllten Text

<input id="formloginusername" type="text" name="username" placeholder="Username" value="Pre-filled-from-database"></input> 

JS:

$(document).ready(function() { 
    $("#formloginusername").focus(); 
}); 

Problem:

Der Text "Vorgefüllte-from-Datenbank" ist markiert. Ich möchte nur, dass der Cursor im Feld angezeigt wird, als ob der Benutzer nach dem gefüllten Text darauf geklickt hätte.

Danke!

+1

Das wäre das Standardverhalten des Browsers. – adeneo

+0

Ich stimme mit adeneo überein, abgesehen davon, dass Sie die Eingabe nicht wie folgt schließen müssen ... Schließen Sie stattdessen die Eingabe wie folgt VIDesignz

Antwort

14

Hier ist ein netter kleiner Trick ...

$(document).ready(function() { 
    var $field = $("#formloginusername"), 
     oldVal = $field.val(); 
    $field.focus().val('').val(oldVal); 
}); 

DEMO: http://jsfiddle.net/X7Y8S/

+1

Perfekt! Vielen Dank! – GiantDuck

+0

Dies ist ein fantastisches Beispiel, danke. Die Frage ist: Jetzt gehst du auf deine Seite und es ist fokussiert, aber sag als Benutzer, du fängst an zu schreiben: es löscht den Text nicht, er fügt nur hinzu. Dh Ihr Wert ist "hier suchen!" Sie geben 'College Mathe Bücher', es wäre 'Suche hier! College Mathe Bücher'. Wie vermeide ich das? BEARBEITEN: $ ("input.search-input-header") [0] .reset(); funktioniert in Ordnung, aber nur, wenn Sie klicken. Wie hast du den Fokus eingestellt UND wenn du mit der Eingabe beginnst, wird es gelöscht? – DnfD

+1

@DavidPardy - Wenn Sie sich keine Sorgen über ältere Browser machen, beschreiben Sie das Standardverhalten des 'Platzhalter'-Attributs. ' ' – ahren

0

Genau dies tun:

$('#field').focus().val($("#field").val()); 
0

Hopstream, was ich in Chrome mit Ihrer Methode gefunden das ist Der Cursor endete am Ende des Textes. Ich brauchte einen Weg, um den Cursor auf den Anfang des Feldes zu fokussieren, ohne den Text hervorzuheben. . Das ist für mich gearbeitet:

$ ('# ElementID') jeweils (function() { $ (this) .focus(); this.selectionEnd = this.selectionStart; });

Verwandte Themen