• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Cursor-Position nach Autofokus im Textfeld setzen

T

tomgoes

New member
HTML: 
<head>
<script type="text/JavaScript">
<!--
function setFieldFocus()
{
   var id = "textfeldid";
   window.document.getElementById("textfeldid").focus(); //focus setzen
   window.document.getElementById("textfeldid").value = document.getElementById("textfeldid").value.length; //focus ans ende verschieben

///////!!!!!!!--value.length -wird benutzt um den cursor ans textende zu setzen
///////!!!!!!!--schreibt aber leider die length(zahl) in das formfield eingabe, statt $_POST['eingabe'];
}
   -->
</script>
</head>
<body onload="setFieldFocus()">
<?php
//some code . . . . . . . . . //
///---formular----//
echo "<form action=\"test6.php\" method=\"post\">";
?>
<table border=1><tr>
	<td class="standard" colspan="3" align="center"><b>Ihren Text eintragen: </b><br>
<script type="text/javascript"><!--
function submit()
{
    form.submit();
    }
//--></script>
<input id="textfeldid" type=text name="eingabe" value="<?php echo $_POST['eingabe']; ?>"  onkeyup="submit()" size="40" maxlenght="200">
<?php
echo $_POST['eingabe'];
?>
<input type="submit" value="los">
 </td>
</tr></table>
<?php
echo "</form>";
?>
</body>
 
Zuletzt bearbeitet von einem Moderator:
AW: value.length -wird benutzt, soll aber nicht das value aendern ?

Mit value.length kannst du den Fokus gar nicht setzen oder "verschieben" - natürlich wird dadurch der Inhalt des Textfeldes verändert...
Kannst du bitte erklären, was genau du erreichen möchtest?
Bitte setze den Code in
Code: 
-Tags (nicht [inline], das ist für kurze Code-Abschnitte) und zeig den Quelltext so, wie er im Browser ankommt!

PS: Wozu speicherst du die ID in einer Variable, benutzt sie aber nicht? Ich finde das gesamte Skript verwirrend...
 
AW: value.length -wird benutzt, soll aber nicht das value aendern ?

Code: 
<input id="textfeldid" type=text name="eingabe" value="<?php echo $_POST['eingabe']; ?>" onkeyup="submit()" size="40" maxlenght="200">
nach jeder eingabe erolgt submit, dann soll der cursor für die naechste eingabe (naechsten buchstaben) bereitstehen
 
AW: value.length -wird benutzt, soll aber nicht das value aendern ?

tomgoes schrieb:
nach jeder eingabe erolgt submit, dann soll der cursor für die naechste eingabe (naechsten buchstaben) bereitstehen
Zum Vergrößern anklicken....
Dann kannst du die gesamte Zeile window.document.getElementById("textfeldid").value = document.getElementById("textfeldid").value.length; //focus ans ende verschieben rausschmeissen.
Aber mir ist ehrlich gesagt der Sinn nicht klar: man gibt einen Buchstaben ein, dann wird das Formular abgeschickt, dann gibt man wieder einen ein und es wird wieder abgeschickt??? :confused:
 
AW: value.length -wird benutzt, soll aber nicht das value aendern ?

Code: 
window.document.getElementById("textfeldid").value = document.getElementById("textfeldid").value.length; //focus ans ende verschieben
diese zeile setzt mir den focus an die neue eingabeposition !? das funktioniert, aber eben diese zeile setzt auch den inhalt im formular auf die laenge (zahl)

der sinn:
mittels ttfbox wird in php ein image mit ausgewaehlter schriftart und farbe erstellt, die schrift soll mit der eingabe wachsen.

es geht also um beschriftung online erstellen, ob es sinn macht, dieses mit jedem einzelnen onkeyup weiter aufzubauen oder zur ueberlastung fuehrt, oder ich andere alternativen suchen muss ist mir noch nicht klar ?
 
AW: value.length -wird benutzt, soll aber nicht das value aendern ?

tomgoes schrieb:
Code: 
window.document.getElementById("textfeldid").value = document.getElementById("textfeldid").value.length; //focus ans ende verschieben
diese zeile setzt mir den focus an die neue eingabeposition !? das funktioniert, aber eben diese zeile setzt auch den inhalt im formular auf die laenge (zahl)
Zum Vergrößern anklicken....
Nein, tut sie nicht. Das tut diese Zeile: window.document.getElementById("textfeldid").focus(); //focus setzen
PS: das window. brauchst du nicht. Es genügt document.getElementById("textfeldid").focus(); //focus setzen

tomgoes schrieb:
der sinn: mittels ttfbox wird in php ein image mit ausgewaehlter schriftart und farbe erstellt, die schrift soll mit der eingabe wachsen.
Zum Vergrößern anklicken....
Dann solltest du das ganze aber per Ajax nachladen - Usability, wenn die Seite bei jedem eingegebenen Buchstaben neu lädt ist null und wäre extrem störend...

PS: wozu hast du die ID eigentlich in einer Variable gespeichert, wenn du sie nicht nutzt?
PPS: dein HTML ist invalide.
 
AW: value.length -wird benutzt, soll aber nicht das value aendern ?

jepp, die var id = "textfeldid"; ist ueber.
Code: 
window.document.getElementById("textfeldid").focus(); //focus setzen
setzt den focus in das feld, aber immer an den anfang, also vor den text (firefox - bei iceweasel ans ende)
nach langem suchen habe ich mit
Code: 
window.document.getElementById("textfeldid").value = document.getElementById("textfeldid").value.length;
den cursor auch beim firefox ans ende (neue eingabeposition) bekommen ? das kann doch nicht alternativlos sein ??

dann stellt sich die frage anders, wer bringt den cursor in die richtige position ?
mit focus bekomme ich das feld, wie teile ich ihm die position im feld mit ?
mit php
Code: 
$eingabemenge = strlen($_POST['eingabe']);
bekomme ich den startpunkt
Code: 
window.document.getElementById(id).focus() =  window.document.getElementById(id).focus() + <?php echo $eingabemenge ß>
funzt leider auch nicht ??

okay und window. wird rausgenommen und html - es ist bislang nur test . . .
 
tomgoes schrieb:
nach langem suchen habe ich mit
Code: 
window.document.getElementById("textfeldid").value = document.getElementById("textfeldid").value.length;
den cursor auch beim firefox ans ende (neue eingabeposition) bekommen ? das kann doch nicht alternativlos sein ??
Zum Vergrößern anklicken....
Äh nein, das ist nämlich auch Quatsch :rolleyes:

tomgoes schrieb:
dann stellt sich die frage anders, wer bringt den cursor in die richtige position ?
Zum Vergrößern anklicken....
OK, jetzt habe ich dich auch endlich verstanden - das geht so:
HTML: 
<!DOCTYPE html>
<html>
	<head>
		<title>autofocus and set cursor position</title>
		<meta charset="UTF-8">
	</head>
	<script>
	document.addEventListener("DOMContentLoaded",
		function(){
			var textfield = document.getElementById("textfield");
			var position = textfield.value.length;
			textfield.focus();
			setCursorPosition(textfield, position);
		}
	);
	
	function setCursorPosition(node, pos){
		var node = (typeof node == "string" || node instanceof String) ? document.getElementById(node) : node;
		if(!node){
			return false;
		}
		else if(node.createTextRange){
			var textRange = node.createTextRange();
			textRange.collapse(true);
			textRange.moveEnd(pos);
			textRange.moveStart(pos);
			textRange.select();
			return true;
		}
		else if(node.setSelectionRange){
			node.setSelectionRange(pos, pos);
			return true;
		}
		return false;
	}
	</script>
	<body>
		<input type="text" id="textfield" value="value of textfield">
	</body>
</html>
Lösungsvorschlag übernommen von javascript - Set cursor at a length of 14 onfocus of a textbox - Stack Overflow.


Ich möchte aber nochmal darauf hinweisen:
Julian schrieb:
Usability, wenn die Seite bei jedem eingegebenen Buchstaben neu lädt ist null und wäre extrem störend...
Zum Vergrößern anklicken....
 
Zuletzt bearbeitet:
AW: value.length -wird benutzt, soll aber nicht das value aendern ?

->julian
jepp thats it
der cursor springt im firefox in die richtige position, in iceweasel zwar nicht mehr, ie und andere noch nicht geprueft.
vielen dank fuer geduld und hilfe und dem ratschlag folgend werde ich sehen, ob es mit ajax besser zu realisieren ist.
cua (oder sagt man hoer rua(read you again?))
tomgoes
 
AW: value.length -wird benutzt, soll aber nicht das value aendern ?

tomgoes schrieb:
vielen dank fuer geduld und hilfe und dem ratschlag folgend werde ich sehen, ob es mit ajax besser zu realisieren ist.
Zum Vergrößern anklicken....
Bitte - gern geschehn. Und bitte mach das mit Ajax - kein User wird in Kauf nehmen, dass sich für die Eingabe eines einzigen durchschnittlichen Wortes die Seite mehr als 5 mal neu aufbaut!
Für eine größere Browser-Kompatiblität (IE 8) kannst du übrigens noch folgende Stelle
HTML: 
document.addEventListener("DOMContentLoaded",
	function(){
		var textfield = document.getElementById("textfield");
		var position = textfield.value.length;
		textfield.focus();
		setCursorPosition(textfield, position);
	}
);
durch
Code: 
window.onload = function(){
  var textfield = document.getElementById("textfield");
  var position = textfield.value.length;
  textfield.focus();
  setCursorPosition(textfield, position);
}
ersetzen.
 
Und wenn der Nutzer in der Mitte etwas Text einfügt oder löscht, gibt es gar keine Möglichkeit, den Cursor an die Richtige Stelle zu setzen, da diese Information mit dem Neuladen verloren geht.

Wenn du das Bild mit dem Text unbedingt per PHP erzeugen willst (ich würde ja jetzt ja auch <canvas> bauen), würde ich den Text als GET-Parameter verschicken, aber nicht über das Formular, sondern sich per Hand eine URL zusammen bauen (in etwa so: example.org/image.php?text=was_auch_immer) und diese URL dann einem <img> als .src zuweisen. Dann hast du die ganze Cursorproblematik nicht.

PS: AJAX wird hier wahrscheinlich auch nicht so wirklich eine Lösung sein... mir fällt auch jeden Fall keine elegante Lösung ein - mit einem <img> ist das viel einfacher.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben