Position eines Formularfeldes auf der Seite

ja, geht das?

mit der Mausposition hab ichs schon probiert.
allerdings ist das blöd, wenn die Mauszeiger irgendwo auf der Seite steht, und der user mit Tab im formular navigiert.

wie bekomme ich die Cursorposition?
 
LOL. darauf wäre ich jetzt nicht gekommen, das der User mit TAB über die Seite geht und die Teile dann aufgehen... müsste man sich vieleicht noch was anderen Überlegen. :)
 
Hallo webpagemaster,

du könntest vielleicht folgendes machen:
  • unmittelbar hinter jedes INPUT-Feld einen DIV-Block mit dem entsprechendem Hilfetext ablegen,
  • diesen DIV-Block mit ID und entsprechenden CSS-Eigenschaften (u.U. als Klasse) versehen, so dass er über dem Formular liegt,
  • bei "onFocus" diesen DIV-Block sichtbar und bei "onBlur" unsichtbar machen.
Ein entsprechender Klassenselektor würde beispielsweise so aussehen:
Code: 
div.hilfe {
position: absolute;
/* top: auto; Initialwert! */
/* left: auto; Initialwert! */
width: 120px;
display: inline; /* legt diesen Hilfeblock direkt hinter das INPUT-Feld */
margin-left: 15px; /* x-Abstand zum INPUT-Feld */
padding: 5px;
border: 1px solid maroon;
background-color: beige;
visibility: hidden;
}
Mit document.getElementById(id).style.visibility="visible" machst du ihn dann sichtbar.
 
Vielleicht wurde mein Link ja übersehen :)

Die Eigenschaften ermittelt man über offsetLeft/offsetTop ....gibt die aktuelle linke und obere Position des jeweiligen Seitenelementes zurück(egal, ob es eine Positionsangabe besitzt, oder nicht)
 
offsetLeft, offsetTop...

wenn ich das mittels Funktion aufrufen möcht gehts irgendwie nicht?

HTML: 
<html>
<head>
<title></title>
<script language="JavaScript" type="text/JavaScript">
function position(wert){
pos_left=document.all.wert.offsetLeft;
alert(pos_left);
}
</script>
</head>
<body>
<table>
<tr>
<td>feld 1</td>
<td>feld 2</td>
</tr>
<tr>
<td>feld 1</td>
<td>feld 2</td>
</tr>
<tr>
<td>feld 1</td>
<td><input id="textfeld1" type="text" onfocus="position('textfeld1')"></td>
</tr>
</table>
</body>
</html>
 
Hallo webpagemaster,

bei der Möglichkeit, die ich dir vorgeschlagen habe, musst du die Position der Inputfelder nicht auslesen - sie wird an den entsprechenden Hilfetextblock übergeben.

Versuch es mal hiermit:
HTML: 
        <html>
        <head>
        <title>...</title>
        <style type="text/css">
        <!--
        div.hilfe {
        	position: absolute;
        	/* top: auto; Initialwert! */
        	/* left: auto; Initialwert! */
        	width: 120px;
        	display: inline; /* legt diesen Hilfeblock direkt hinter das INPUT-Feld */
        	margin-left: 15px; /* x-Abstand zum INPUT-Feld */
        	padding: 5px;
        	border: 1px solid maroon;
        	background-color: beige;
        	visibility: hidden;
        }
        -->
        </style>
        <script language="JavaScript" type="text/JavaScript">
        <!--
        // Hilfe-Block unsichtbar/sichtbar machen:
        function blockSichtbarkeit(id, boolVar)
        { if (document.getElementById)
        	if(boolVar)
        	  document.getElementById(id).style.visibility="visible"
        	else
        	  document.getElementById(id).style.visibility="hidden";	  
        }
        //-->
        </script>
        </head>
        <body>
        <table>
        <tr>
        <td>Feld 1</td>
        <td>
 <input id="textfeld1" type="text" onfocus="blockSichtbarkeit('hilfe1',true)" onBlur="blockSichtbarkeit('hilfe1',false)">
          <div id="hilfe1" class="hilfe"> Hilfetext 1 zum Ausfüllen dieses Feldes </div>
        </td>
        </tr>
        <tr>
        <td>Feld 2</td>
        <td>
 <input id="textfeld2" type="text" onfocus="blockSichtbarkeit('hilfe2',true)" onBlur="blockSichtbarkeit('hilfe2',false)">
          <div id="hilfe2" class="hilfe"> Hilfetext 2 zum Ausfüllen dieses Feldes </div>
        </td>
        </tr>
        <tr>
        <td>Feld 3</td>
        <td>
 <input id="textfeld3" type="text" onfocus="blockSichtbarkeit('hilfe3',true)" onBlur="blockSichtbarkeit('hilfe3',false)">
          <div id="hilfe3" class="hilfe"> Hilfetext 3 zum Ausfüllen dieses Feldes </div>
        </td>
        </tr>
        <tr>
        <td colspan=2>usw. usf.</td>
        </tr>
        </table>
        </body>
        </html>
Wenn du aber die Position auslesen möchtest, weil du etwas anderes realisieren willst, dann ist der Rat von fatalus m.E. der beste Weg.

edit:
Habe gerade noch eine Korrektur im HTML-Quelltext vorgenommen: Die CSS-Klasse "hilfe" gehört natürlich an den DIV-Block, woanders (z.B. im Input-Tag) bewirkt sie eh nichts.
 
Zuletzt bearbeitet:
Das mit offset.... funktioniert bei dir nicht, weil du das Feld falsch ansprichst.

Ein Blick in die JS-Konsole wird dir einen Fehler "objekt erwartet" anzeigen, schätze ich.

Code: 
alert(document.getElementById(wert).offsetLeft);
...sollte besser funktionieren.

Dass es die echte Position im Dokument(nicht im Fenster) ist, siehst du dann schon.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück