Focus auf Textfeld setzen

[pinguin0814]

Hallo,

habe ein Problem mit focus() setzen auf ein Textfeld, wenn die Datei nicht komplett neu geladen wird, sondern die Werte über Ajax übergeben werden.

hier werden die Daten eingeschrieben:

<input type="text" name="laenge" size="25" id="eingabe" value="" onkeyup="check(laenge);">

ein Javascript ruft die Ajax Funktion auf und die Funktion focussetzen():

function check(laenge)
{
	if (laenge.value.length==13)
{
	load();
	focussetzen();
}
}

in der function focussetzen soll der Focus wieder auf dasselbe input Feld gesetzt werden:

function focussetzen()
{
	document.getElementByID("eingabe").focus();
}

dies ist nun leider nicht der Fall.
Fällt irgendjemanden dazu etwas ein, wie das Textfeld immer wieder den Focus erhält, ohne das die Datei neu geladen wird???

[Kropff]

nimm in der load() den aufruf vor:

function load()
{
  ..
  if (ajax_obj.readyState == 4 && ajax_obj.status == 200)
  {
    focussetzen();
  }
} 

ohne mehr code kann ich aber nur raten.

peter

[pinguin0814]

Hallo Kropff,

danke für die schnelle Antwort, leider blieb das gewünschte Ergebnis aus.

Ich füge dir mal meine Funktion load() dazu, vllt. erkennst Du den Fehler.
Deinen Code habe ich erstmal wieder rausgenommen, da es leider nicht die Lösung brachte.

function load()
{
  var eingabe=document.getElementById("eingabe").value;
  with (new Ajax()){
  
    url="./sn_scan.php";
    method="POST";
    params="eingabe="+eingabe;
    onSuccess=successHandler;
    onError=errorHandler;
    doRequest();
  }
   
//Den Text in die Seite einfuegen
function successHandler(txt,xml){
  document.getElementById("text").innerHTML=txt;
 
}

//Fehler
function errorHandler(msg){
  document.getElementById("text").innerHTML=msg;
}
}

ansonsten funktioniert alles, bloss der Focus wird nicht automatisch in das textfeld gesetzt. Bei Bedienung des Tabs springt er erst in das Feld.

Zur Erläuterung, die Daten werden per Barcodescanner eingelesen und weiterverarbeitet.
Dieses passiert schnell hintereinander, deswegen die Lösung per Ajax, um nicht jedesmal die komplette Datei neu zu laden.

Ich hoffe meine Erläuterung war einigermaßen verständlich.
Danke für im vorraus für deine Bemühungen.

[Kropff]

wir beiden sind blind wie die nacht! nicht

document.getElementByID("eingabe").focus(); 

sondern

document.getElementById("eingabe").focus(); 

btw: firebug nutzen, dann findest du solche fehler sofort.

peter

[pinguin0814]

ok, das war mein Tippfehler. Hätte ich sehen müssen.

Aber leider ist das Problem damit nicht gelöst, es ist zum verzweifeln.

Vielleicht fällt jemanden noch ein Lösung dazu oder hatte selber schon einmal das Problem.

[Kropff]

hast du ggf. ein online-beispiel verfügbar?

peter

[pinguin0814]

leider im moment nur lokal, aber geb mir ein paar minuten

[pinguin0814]

ist leider doch nicht so schnell möglich, sorry

Habe aber mal ein jpg angehangen.

Und zwar werden hier die S/N Nummern eingegeben. Beim ersten Aufruf ist der Focus in dem Textfeld. Da die Datei neu geladen wird.
Sind nun (siehe Funktion check(laenge)) 13 Zeichen eingegeben rufe die Funktion load() auf. Per Ajax wird die $eingabe übergeben und bearbeitet, funktioniert auch alles wunderbar.
Nun sollte der Focus aber wieder in dem Textfeld stehen, siehe Funktion focussetzen(), dies geschieht aber nicht.

Füge auch noch einmal die ajax.js ein:

function Ajax() {
  //Eigenschaften deklarieren und initialisieren
  this.url="";
  this.params="";
  this.method="GET";
  this.onSuccess=null;
  this.onError=function (msg) {
    alert(msg)
  }
}

Ajax.prototype.doRequest=function() {
  //Ueberpruefen der Angaben
  if (!this.url) {
    this.onError("Es wurde kein URL angegeben. Der Request wird abgebrochen.");
    return false;
  }

  if (!this.method) {
    this.method="GET";
  } else {
    this.method=this.method.toUpperCase();
  }

  //Zugriff auf Klasse für readyStateHandler ermoeglichen  
  var _this = this;
  
  //XMLHttpRequest-Objekt erstellen
  var xmlHttpRequest=getXMLHttpRequest();
  if (!xmlHttpRequest) {
    this.onError("Es konnte kein XMLHttpRequest-Objekt erstellt werden.");
    return false;
  }
  
  //Fallunterscheidung nach Uebertragungsmethode
  switch (this.method) {
    case "GET": xmlHttpRequest.open(this.method, this.url+"?"+this.params, true);
                xmlHttpRequest.onreadystatechange = readyStateHandler;
                xmlHttpRequest.send(null);
                break;
    case "POST": xmlHttpRequest.open(this.method, this.url, true);
                 xmlHttpRequest.onreadystatechange = readyStateHandler;
                 xmlHttpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
                 xmlHttpRequest.send(this.params);
                 break;
  }  

  //Private Methode zur Verarbeitung der erhaltenen Daten
  function readyStateHandler() {
    if (xmlHttpRequest.readyState < 4) {
      return false;
    }
    if (xmlHttpRequest.status == 200 || xmlHttpRequest.status==304) {
      if (_this.onSuccess) {
        _this.onSuccess(xmlHttpRequest.responseText, xmlHttpRequest.respon************ML);
      }
    } else {
      if (_this.onError) {
        _this.onError("["+xmlHttpRequest.status+" "+xmlHttpRequest.statusText+"] Es trat ein Fehler bei der Datenbertragung auf.");
      }
    }
  }
}

//Gibt browserunabhaengig ein XMLHttpRequest-Objekt zurueck
function getXMLHttpRequest() 
{
  if (window.XMLHttpRequest) {
    //XMLHttpRequest fuer Firefox, Opera, Safari, ...
    return new XMLHttpRequest();
  } else 
  if (window.ActiveXObject) {
    try {   
      //XMLHTTP (neu) fuer Internet Explorer 
      return new ActiveXObject("Msxml2.XMLHTTP");
    } catch(e) {
      try {        
        //XMLHTTP (alt) fuer Internet Explorer
        return new ActiveXObject("Microsoft.XMLHTTP");  
      } catch (e) {
        return null;
      }
    }
  }
  return false;
}

[Wyveres]

Hallo Kropff,

danke für die schnelle Antwort, leider blieb das gewünschte Ergebnis aus.

Ich füge dir mal meine Funktion load() dazu, vllt. erkennst Du den Fehler.
Deinen Code habe ich erstmal wieder rausgenommen, da es leider nicht die Lösung brachte.

function load()
{
  var eingabe=document.getElementById("eingabe").value;
  with (new Ajax()){
  
    url="./sn_scan.php";
    method="POST";
    params="eingabe="+eingabe;
    onSuccess=successHandler;
    onError=errorHandler;
    doRequest();
  }
   
//Den Text in die Seite einfuegen
function successHandler(txt,xml){
  document.getElementById("text").innerHTML=txt;
 
}

//Fehler
function errorHandler(msg){
  document.getElementById("text").innerHTML=msg;
}
}

ansonsten funktioniert alles, bloss der Focus wird nicht automatisch in das textfeld gesetzt. Bei Bedienung des Tabs springt er erst in das Feld.

Zur Erläuterung, die Daten werden per Barcodescanner eingelesen und weiterverarbeitet.
Dieses passiert schnell hintereinander, deswegen die Lösung per Ajax, um nicht jedesmal die komplette Datei neu zu laden.

Ich hoffe meine Erläuterung war einigermaßen verständlich.
Danke für im vorraus für deine Bemühungen.

Den Focus in die Success Function setzten ... das verhalten is normal da er den focus auf das Textfeld setzt bevor die Success function durch ist.

Sowas kannste ganz einfach herrausfinden ;D setz einfach mal text außerhalb des Ajax aufrufes in die load function ins textfeld ;D

oder nach dem aufruf der load function in der check function.

[pinguin0814]

@Wyveres, die Idee hatte ich auch schon, hat mich aber auch nicht weitergebracht.

[Wyveres]

Was mir gerade an der Load function auffällt ;D die schleifen ...

function load()
{
  var eingabe=document.getElementById("eingabe").value;
  with (new Ajax())
  {
  
    url="./sn_scan.php";
    method="POST";
    params="eingabe="+eingabe;
    onSuccess=successHandler;
    onError=errorHandler;
    doRequest();
  }
<--- hier fehlt doch was?   
//Den Text in die Seite einfuegen
function successHandler(txt,xml)
{
  document.getElementById("text").innerHTML=txt;
 
}

//Fehler
function errorHandler(msg)
{
  document.getElementById("text").innerHTML=msg;
}
}<--- die hier vielleicht?

is der Code im orginal auch so?

und normalerweise müsste es eigentlich gehen ... da ich es eigentlich immer so mache ... wenn ich den focus innerhalb einer ajax function nach dem abarbeiten der ajax function zurück auf ein bestimmtes feld setzen will, tue ich das innerhalb des onComplete oder onSuccess Block. Weil er den Focus erst dann wieder auf das Feld setzt wenn die Ajax function durch ist.
das würde bei dir heißen.

//Den Text in die Seite einfuegen
function successHandler(txt,xml)
{
  document.getElementById("text").innerHTML=txt;
  document.getElementById("eingabe").focus(); 
}

[pinguin0814]

Hallo,

so habe soeben zum ansehen die Datei aufgespielt.

Link

Bitte im IE ansehen, das es nur darauf optimiert bzw. gebraucht wird.

Die Datei sn_scan.php habe ich auf das wesentliche reduziert.

Nach der Eingabe von 13 Zeichen wird die Funktion load() aufgerufen. Danach sollte der Focus wieder im Textfeld stehen. Bin für jede Hilfe dankbar.

Hier noch einmal die sn_scan1.php

<?php
session_start();
?>
<body onLoad="window.document.getElementById('eingabe').focus();">
<script type="text/javascript" src="ajax1.js"></script>
<script type="text/javascript" src="suggest1.js"></script>
<script language="javascript">
function check(laenge)
{
if (laenge.value.length==13)
{
	load();
}
}
</script>
<?php
if(isset($_POST["eingabe"]))
{
	$eingabe=$_POST["eingabe"];
}
if(isset($_GET["eingabe"]))
{
	$eingabe=$_GET["eingabe"];
}
//if (!get_magic_quotes_gpc())
//$eingabe = addslashes($eingabe);
$ausgabe.= '<div>'.
'<input type="text" id="eingabe" name="laenge" size="25" value="" onkeyup="check(laenge)">'.
'</div>';
print '<div id="text">';
print $ausgabe.'</div>';
?>

sowie die Funktion load() die in der suggest1.php aufgerufen wird:

function load()
{
  var eingabe=document.getElementById("eingabe").value;
  with (new Ajax()){
  
    url="./sn_scan1.php";
    method="POST";
    params="eingabe="+eingabe;
    onSuccess=successHandler;
    onError=errorHandler;
    doRequest();
    }
}
//Den Text in die Seite einfuegen
function successHandler(txt,xml){
  document.getElementById("text").innerHTML=txt;
	document.getElementById("eingabe").focus();
}
//Fehler
function errorHandler(msg){
	document.getElementById("text").innerHTML=msg;
}

Gruß und Danke

[Wyveres]

onkeyup="check(laenge)"

firefox firebug ... laenge is nicht definiert ... wie währe es mit this? ... an der stelle ? da du ja in der function auf laenge.value.length zugreifst ... währe das schonmal sinvoller.

[pinguin0814]

@Wyveres danke, ja, das ist korrekt, läuft nun auch im Firefox, aber leider nicht im IE welcher für mich vordergründig ist.

[Wyveres]

Läuft nicht im IE heist was? ...