Gockel: Focus setzen

Hallo Leute,

bervor ich mich jetzt steinigt da es zu dem Thema schon genug im Internet gibt. Aber ich bekomme es nicht hin.

Folgendes Problem:

Ich möchte den Focus ein ein Eingabefeld einer Suchfunktion setzten. Diese Suchfunktion wird allerdings in die Seite includiert.

Ich poste hier mal den Quellcode der aufrufenden Seite:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<?php include($ShopConfig_absolute_path . "/boxes/meta.php"); ?>

<link rel="stylesheet" type="text/css" href="<?php echo $ShopConfig_live_site; ?>/template/css/style.css" />

<script type="text/javascript">
<!--
function tick()
{
var hours, minutes, seconds;
var intHours, intMinutes, intSeconds;
var today;

today = new Date();
intHours = today.getHours();
intMinutes = today.getMinutes();
intSeconds = today.getSeconds();

hours = intHours+":";
if (intMinutes < 10) {minutes = "0"+intMinutes+":";}
else {minutes = intMinutes+":";}
if (intSeconds < 10) {seconds = "0"+intSeconds+" ";}
else {seconds = intSeconds+" ";}
timeString = hours+minutes+seconds;
document.getElementById("Clock").innerHTML=timeString;

window.setTimeout("tick();", 1000);
}
window.onload = tick;
//-->
</script>

</head>

<body>

<?php include($ShopConfig_absolute_path . "/boxes/warnungen.php"); ?>

<div style="position: relative; width: 950px; text-align: right; background: #123e59; line-height: 25px; vertical-align: middle; color: #ffffff;">
<?php include($ShopConfig_absolute_path . "/menus/top.php"); ?>&nbsp;
</div>

<div style="position: relative; width: 950px; background-image: url(<?php echo $ShopConfig_live_site; ?>/template/images/header.jpg); height: 115px;">
<div id="header_logo"><?php if (GetConf(Logo)) {$logo = "/images/" . GetConf(Logo); echo thumb_bild($logo,400,95,GetConf(ShopName));} ?></div>
<div id="header_shopname"><?php echo GetConf(ShopName); ?></div>
</div>

<div style="position: relative; width: 950px; height: 7px; background: #123e59;"></div>

<div style="position: relative; width: 950px;">
<div style="position: relative; height: 50px; width: 950px; background-image: url(<?php echo $ShopConfig_live_site; ?>/template/images/balken.gif);">
<div id="welcome"><?php include($ShopConfig_absolute_path . "/boxes/welcome.php"); ?></div>
<div id="datetime"><?php echo Datum(); ?> | <span id="Clock"></span></div>
</div>

<div style="position: relative; float: left; width: 210px; margin-bottom: 20px;">  
	<div style="position: relative; top: -40px; width: 200px; overflow: auto;">  
		<?php include($ShopConfig\_absolute\_path . "/boxes/search.php"); ?>  
		<?php include($ShopConfig\_absolute\_path . "/menus/categories.php"); ?>  
		<?php include($ShopConfig\_absolute\_path . "/boxes/paypal.php"); ?>  
		<br><br>  
	</div>  
</div>  

<div style="position: relative; float: left; width: 530px; top: 10px; padding: 1px; overflow: auto; margin-bottom: 20px;">  
	<?php if ($\_GET['meldung']) {echo "<div class='meldung'>$\_GET[meldung]</div>"; } ?>  
	<?php  
		function mail2unicode($mail\_address) {  
			$unicode\_address = '';  
			for($i = 0; $i < strlen($mail\_address); $i++) {  
				$unicode\_address .= '&#'.ord($mail\_address[$i]).';';  
				echo $unicode\_address;  
			}  
			return $unicode\_address;  
		}  
		  
		function parse($full\_html){  
			$full\_html = preg\_replace("/([\_\\.0-9a-z-]+@([0-9a-z][0-9a-z-]+\\.)+[a-z]{2,3})/e","mail2unicode('\\1')",$full\_html);  
			return $full\_html;  
		}  
	  
		ob\_start('parse');  

		include($ShopConfig\_absolute\_path . "/includes/mainbody.php");  

		ob\_end\_flush();  
	?>  
	<br><br>  
</div>  

<div style="position: relative; float: left; width: 200px; top: 10px; left: 10px; margin-bottom: 20px;">  
	<?php include($ShopConfig\_absolute\_path . "/menus/kunde.php"); ?>  
	<?php include($ShopConfig\_absolute\_path . "/menus/cms.php"); ?>  
	<?php include($ShopConfig\_absolute\_path . "/boxes/login.php"); ?>  
	<?php include($ShopConfig\_absolute\_path . "/boxes/cart.php"); ?>  
	<?php include($ShopConfig\_absolute\_path . "/menus/info1.php"); ?>  
	<br><br>  
</div>  

</div>

<div style="clear: left; width: 950px; background: #51709e; line-height: 25px; vertical-align: middle; text-align: center;">
<?php include($ShopConfig_absolute_path . "/menus/info2.php"); ?>
</div>

<?php if (GetConf(LogStat)==1) {echo GetConf(StatCode);} ?>

</body>
</html>

Und hier die Suchfunktion die includiert wird:

<?php if (GetConf(mod_rewrite)==1) { ?>
<form method="post" action="list.html" name="suchbox">
<?php } ELSE { ?>
<form method="post" action="index.php?option=list" name="suchbox">
<?php } ?>
<input name="simplesearch" value="1" type="hidden">
<table class="box2" border="0" cellpadding="0" cellspacing="0" width="100%">
  <tbody>
    <tr>
<td width="40%" style="text-align: right; padding-top: 10px;">Suche nach:</td>
<td width="60%" style="text-align: right; padding-top: 10px; padding-right: 10px;"><input class='input' name="suchfeld" size="15"></td>
    </td>
    </tr>
  </tbody>
</table>
<table  class="box2" border="0" cellpadding="0" cellspacing="0" style="padding-bottom: 10px;" width="100%">
  <tbody>
    <tr>
<?php if (GetConf(mod_rewrite)==1) { ?>
<td class="box_kleine_schrift2" style="padding-left: 5px; vertical-align: middle; text-align: center;"><a class="box_kleine_schrift2" href="advsearch.html">Erweiterte Suche</a></td>
<?php } ELSE { ?>
<td class="box_kleine_schrift2" style="padding-left: 5px; vertical-align: middle; text-align: center;"><a class="box_kleine_schrift2" href="index.php?option=advsearch">Erweiterte Suche</a></td>
<?php } ?>
<td style="text-align: right; padding-right: 10px;"><input class="button" value="Suchen" style="width: 65px;" type="submit"></td>
    </tr>
  </tbody>
</table>
</form>

Kann mir jemand auf die Sprünge helfen wie sowas zu bewerkstelligen ist?

Dicken Dank schon mal im voraus
Jörg

  1. Hi,

    Ich möchte den Focus ein ein Eingabefeld einer Suchfunktion setzten.

    Also ein clientseitiges Problem.

    Diese Suchfunktion wird allerdings in die Seite includiert.

    Wie die Seite serverseitig erzeugt wurde, spielt für den Client keine Rolle.

    Ich poste hier mal den Quellcode der aufrufenden Seite:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>

    <?php include($ShopConfig_absolute_path . "/boxes/meta.php"); ?>

    Du hast ein clientseitiges Problem, also bringt serverseitiger Code absolut gar nichts.

    Kann mir jemand auf die Sprünge helfen wie sowas zu bewerkstelligen ist?

    Vergiß für Dein clientseitiges Problem alles, was auf dem Server passiert. Betrachte nur den clientseitigen Code.

    cu,
    Andreas

    --
    Warum nennt sich Andreas hier MudGuard?
    O o ostern ...
    Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.
  2. Hi Folks,

    Ich möchte den Focus ein ein Eingabefeld einer Suchfunktion setzten.
    [...]
    Kann mir jemand auf die Sprünge helfen wie sowas zu bewerkstelligen ist?

    Wo genau möchtest du diesen denn setzen?
    Ich habe in deinem Quelltext keinen Hinweis darauf gefunden.

    Beschäftige dich mal mit der JavaScript Funktion focus()

    Gruß Sascha

    --
    -----------------------
    <a href="http://www.bohrmedia.de" target="_blank">BohrMedia.de</a>
    1. Hi Sascha,

      genau mit dieser Funktion hab ich mich ja auseindandergesetzt. In verschiedenen Variationen. Keine hat funktioniert. Deshalb habe ich ja den Originalquelltext der Seite und der Suche in unveränderter Form eingestellt.

      Lg
      Jörg

  3. <td style="text-align: right; padding-right: 10px;"><input class="button" value="Suchen" style="width: 65px;" type="submit"></td>

    Wenn du dem input-Element eine ID gibst, kannst du es in einem script-Element direkt danach ansprechen und fokussieren:

    <td style="text-align: right; padding-right: 10px;">  
      <input id="searchfield" class="button" value="Suchen" style="width: 65px;" type="submit">  
      <script type="text/javascript">  
        [code lang=javascript][ref:self812;javascript/objekte/document.htm#get_element_by_id@title=document.getElementById]('searchfield').[ref:self812;javascript/objekte/elements.htm#focus@title=focus]();
    

    </script>
    </td>[/code]

    Mathias

    1. Hi Mathias,

      der Code in der search.php sieht jetzt folgendermasen aus:

      <input class='input' id="searchfield" name="suchfeld" size="15"></td>
      <script type="text/javascript">
          document.getElementById('searchfield').focus();
        </script>

      Funktioniert nur leider nicht. Wenn man die Seite aufruft hat das Suchfeld nicht den Focus. Noch eine Idee?

      Lg
      Jörg

      1. der Code in der search.php sieht jetzt folgendermasen aus:

        <input class='input' id="searchfield" name="suchfeld" size="15"></td>

        Was macht das td Element da?

        <script type="text/javascript">
            document.getElementById('searchfield').focus();
          </script>

        Funktioniert nur leider nicht. Wenn man die Seite aufruft hat das Suchfeld nicht den Focus. Noch eine Idee?

        Du musst auch dafür sorgen, dass der HTML Code gültig ist.

        Struppi.

        1. Hi Struppi,

          Was macht das td Element da?

          arbeiten :-)

          So sieht der Code komplett aus. Hatte nur den ersten Teil weggelassen.

          <td width="60%" style="text-align: right; padding-top: 10px; padding-right: 10px;"><input class='input' id="searchfield" name="suchfeld" size="15"></td>

          Lg
          Jörg

          1. So sieht der Code komplett aus. Hatte nur den ersten Teil weggelassen.

            und jetzt den zweiten.

            Wo steht das script Element?

            Struppi.

            1. <?php if (GetConf(mod_rewrite)==1) { ?>
              <form method="post" action="list.html" name="suchbox">
              <?php } ELSE { ?>
              <form method="post" action="index.php?option=list" name="suchbox">
              <?php } ?>
              <input name="simplesearch" value="1" type="hidden">
              <table class="box2" border="0" cellpadding="0" cellspacing="0" width="100%">
                <tbody>
                  <tr>
              <td width="40%" style="text-align: right; padding-top: 10px;">Suche nach:</td>
              <td width="60%" style="text-align: right; padding-top: 10px; padding-right: 10px;"><input class='input' id="searchfield" name="suchfeld" size="15"></td>
              <script type="text/javascript">
                  document.getElementById('searchfield').focus();
                </script>
                    </td>
                  </tr>
                </tbody>
              </table>
              <table  class="box2" border="0" cellpadding="0" cellspacing="0" style="padding-bottom: 10px;" width="100%">
                <tbody>
                  <tr>
              <?php if (GetConf(mod_rewrite)==1) { ?>
              <td class="box_kleine_schrift2" style="padding-left: 5px; vertical-align: middle; text-align: center;"><a class="box_kleine_schrift2" href="advsearch.html">Erweiterte Suche</a></td>
              <?php } ELSE { ?>
              <td class="box_kleine_schrift2" style="padding-left: 5px; vertical-align: middle; text-align: center;"><a class="box_kleine_schrift2" href="index.php?option=advsearch">Erweiterte Suche</a></td>
              <?php } ?>
              <td style="text-align: right; padding-right: 10px;"><input class="button" value="Suchen" style="width: 65px;" type="submit"></td>
                  </tr>
                </tbody>
              </table>
              </form>

                1. Hi Struppi,

                  ehrlich gesagt sehe ich nicht wo er ungültig sein sollte.

                  Schönes WE
                  Jörg

                  1. Tach auch.

                    ehrlich gesagt sehe ich nicht wo er ungültig sein sollte.

                    <script> ist IMHO kein gültiges Kindelement von <tr>. Müsstest du also außerhalb der Tabelle notieren.
                    Was sagt denn zB die Fehlerkonsole?

                    Bis die Tage,
                    Matti

                    1. Hallo Struppi, Hallo Matti

                      lach, die Fehlerkonsole sagt das der Fehler meistens vor dem Rechner sitzt XD
                      Ich hab die ganze Zeit die richtige Datei geändert aber die falsche hochgeladen. Asche auf mein Haupt.
                      Danke Struppi, jetzt klappt's einwandfrei.

                      Schönes WE
                      Jörg

  4. @@Gockel:

    nuqneH

    Ich möchte den Focus ein ein Eingabefeld einer Suchfunktion setzten.

    HTML5 bietet dafür @autofocus.

    Qapla'

    --
    Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
    (Mark Twain)