Blinkenden Cursor im Formularfeld einschalten

[tilda]

Guten Tag,

ich möchte gerne in meinem Suchfeld einen blinkenden Cursor von Anfang an haben.
Beim Einrichten des Suchformulares habe ich dafür keine Funktion gefunden.
Oder habe ich an der falschen Stelle gesucht?

Viele Grüße
Tilda

[lucina]

Schau mal hier: http://codepen.io/gowda24/pen/tCcFw

Du müsstest das daran koppeln ob ein Feld den Fokus hat.

[tilda]

Jetzt bin ich leider etwas überfordert...

Reicht es in der CSS den folgenden Code einzugeben?

input[type="text"]{    
    border: none ;   
}

[kos]

Hier dürfte eine Lösung mit Javascript angesagt sein.

Schau hierzu mal bei Peter Müllers Buch Little-Boxes => Kontktformular => Den Cursor in das erste Feld setzen.
Dort wird eine Lösung für das Problem vorgestellt.

[ways2web]

das Javascript ist hier entscheident!

$(function(){
  $(".Fname").focus();
});

[tilda]

Mir ist ein Rätsel, an welcher Stelle ich es in Contao einbinde.
In das Frontend Modul, das für das Suchfeld zuständig ist?

[lucina]

Sorry, mein Link war auch der falsche: http://codepen.io/ArtemGordinsky/pen/GnLBq - das geht auch ohne JS.

[tilda]

Okay, die CSS Definitionen für den Cursor.
Aber, irgendwie weiss ich nicht, an welcher Stelle ich den Cursor anspreche.

Mein Suchfeld sieht derzeit so aus:

#mainnav ul.megamenu .suchfeld{
	position:relative;
			}
#mainnav ul.megamenu .text.suchfeld{
	position:relative;
	margin-left:530px;
		width:380px;
 	z-index:10;
	border:solid #000 0.1em; 
	background-color:rgba(255, 255, 255, 0.0);
		}
#mainnav ul.megamenu .lupe{
	position:relative;
	top:-10px;  
	left:462px;
 	z-index:10;
	}

[Andreas]

Du möchtest, dass wenn die Seite aufgerufen wird, ein Feld im Formular sofort den Focus hat (blinkender Cursor), damit man direkt lostippen kann, richtig?

Erstelle ein Template "j_misc" (der Prefix "j_" ist Pflicht).

Schreibe das hier in dein Template:

<script>
  $('#username').focus();
</script> 

Bei dem Code gehe ich davon aus, dass du jQuery geladen hast, sonst müsste der Code leicht anders aussehen.

"#username" ist der CSS-Selektor für dein Feld, hier in dem Beispiel das Feld mit der ID "username".

In deinem Seitenlayout kannst du unten bei "jQuery-Templates" dieses Template jetzt per Checkbox aktivieren.