HTML Programmierung

Tony449

Newbie
Dabei seit
Sep. 2019
Beiträge
6
Hallo zusammen,

ich würde gerne in meinem Eingabefeld zwei Funktionen einfügen, ich weiß aber nicht mit welchen Befehlen man sowas machen kann.

1. Wie kann man den Cursor in einem Eingabefeld um 1-2px nach rechts verschieben?
2. Das Eingabefeld habe ich auf autofocus gesetzt, wenn die Enter Taste gedrückt wird soll eine Weiterleitung zu einer URL erfolgen.

Danke im voraus für alle hilfreichen Antworten.


Es grüßt Tony449
 

Lawnmower

Fleet Admiral
Dabei seit
Mai 2011
Beiträge
11.493
1. Geht mit CSS, Stichwort "padding" bzw in deinem Fall "padding-left".
2. Geht mit Javascript, Schlagworte zum suchen sind "Submit", "onkeyup", und "Event".
Solltest für beide Fälle x Beispiele per Suchmaschine deiner Wahl finden.
 

Kanibal

Lieutenant
Dabei seit
Dez. 2011
Beiträge
980
2) Das sollte auch ohne javascript noch funktionieren. Du musst Dein <input>-Field in ein <form> packen (mit entsprechender URL) und einen submit-Button hinzufügen.
 

Tony449

Newbie
Ersteller dieses Themas
Dabei seit
Sep. 2019
Beiträge
6
2. Geht mit Javascript, Schlagworte zum suchen sind "Submit", "onkeyup", und "Event".
Solltest für beide Fälle x Beispiele per Suchmaschine deiner Wahl finden.
Wenn man die Enter Taste drückt soll eine Weiterleitung zu einer URL erfolgen mehr nicht, aber wie genau programmiert man das?

Ich habe bereits einen Button nur der ist unabhängig von dem Eingabefeld, ich mache das ganze in Wordpress mit dem Elementor Plugin
 
Zuletzt bearbeitet:

Tony449

Newbie
Ersteller dieses Themas
Dabei seit
Sep. 2019
Beiträge
6
Ich habe jetzt folgendes Script, es funktioniert aber noch nicht wo ist da der Fehler?

Code:
<script>
// Get the input field
var input = document.getElementById("suchetext1");

// Execute a function when the user releases a key on the keyboard
input.addEventListener("keyup", function(event) {
  // Number 13 is the "Enter" key on the keyboard
  if (event.keyCode === 13) {
    // Cancel the default action, if needed
location.href='Hier_die_URL'elem.value;// im gleichen Tab
    event.preventDefault();
    // Trigger the button element with a click
    document.getElementById("myBtn").click();
  }
});
</script>
 

mastaqz

Ensign
Dabei seit
Feb. 2003
Beiträge
205
Da du den Debugger wahrscheinlich nicht kennst,
kannst du einfach in Zeile 4 ein console.log(input) setzen.
Bekommst du dort das korrekte Element, bspw. <input />... angezeigt,
dann setzt du in Zeile 7 ein console.log(event.keyCode)
und schaust, was du dort bekommst.

Zeile 10 verstehe ich nicht, da ist irgendwas vermischt.
Zeile 9 ist der Kommentar zu Zeile 11, die sollten deshalb direkt untereinander stehen.

Du musst Debuggen selbst lernen.
 

Tony449

Newbie
Ersteller dieses Themas
Dabei seit
Sep. 2019
Beiträge
6

Tokolosh

Lieutenant
Dabei seit
März 2013
Beiträge
711
Selbstständig, aber nicht mit Webentwicklung hoffe ich?

Debuggen in Javascript ist kein Hexenwerk! Einfach Die Console öffnen und Variablen mit console.log(); rausschreiben.

In Zeile 10 steht Quatsch. location.href muss einer URL zugewiesen werden. Bei dir steht
Code:
'Hier_die_URL'elem.value;
wo kommt elem her? Außerdem wird in Javascript mit '+' konkateniert.
 

Tony449

Newbie
Ersteller dieses Themas
Dabei seit
Sep. 2019
Beiträge
6
Die URL habe ich hier nur nicht gepostet, zugewiesen habe ich Sie zuvor aber. Das eine einfache URL Weiterleitung nach einem Tastendruck so ein Problem darstellt, unfassbar.
 

Tokolosh

Lieutenant
Dabei seit
März 2013
Beiträge
711
Die URL habe ich hier nur nicht gepostet, zugewiesen habe ich Sie zuvor aber. Das eine einfache URL Weiterleitung nach einem Tastendruck so ein Problem darstellt, unfassbar.
Wenn man keine Ahnung hat, was man tun soll ist es natürlich schwierig. Wenn ich nicht weiß wie ein Auto funktioniert, kann ich auch keine Reparaturen daran vornehmen...

Ich habs hier mal gemacht:

test.html

HTML:
<!DOCTYPE html>
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
    <form>
      <input id="suchetext1" type="text" autofocus>
    </form>
  </body>
  <script>
      var input = document.getElementById('suchetext1');
      input.addEventListener('keyup', function(event) {
        event.preventDefault();
        if (event.keyCode === 13) {
          // console.log('Redirect zu url');
          window.location.href = 'test2.html';
        }
      });
    </script>
</html>
test2.html

HTML:
<!DOCTYPE html>
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
    <h1>Ziel...</h1>
  </body>
</html>
Wenn sich die beiden Dateien im gleichen Ordner befinden, funktioniert es so wie du willst. Was genau du vorhast ist mir immernoch schleierhaft.
 

DubZ

Lieutenant
Dabei seit
Dez. 2010
Beiträge
740
wieso eigtl alles per Javascript? Was spricht denn gegen das gute alte <form action="url"> ?
 

ayngush

Lt. Commander
Dabei seit
Okt. 2007
Beiträge
1.387
Die Tatsache, dass das nicht zu 100% in allen Browsern mit der gleichen Funktionsweise versehen wird.
Einige Browser weigern sich via Enter das Form innerhalb von Input-Feldern vom Typ Text abzusenden, wenn kein Submit-Button im selben Form vorhanden ist, andere ignorieren dabei das URL-Attribut und senden das Form an die aufrufende Seite.
Und das Ziel scheint ja auch zu sein nicht das Formular an die andere Seite zu senden, sondern einfach nur die andere Seite aufzurufen. (wozu auch immer das gut sein soll)
 

Andreas_

Lt. Commander
Dabei seit
Jan. 2017
Beiträge
1.655
Vielleicht noch ein Hinweis - es ist suboptimal eine Variable wie ein HTML-Element (input) zu nennen. Spätestens wenn man auf mehrere Elemente des gleichen Typs zugreift, wird das ganze unübersichtlich.
 

DubZ

Lieutenant
Dabei seit
Dez. 2010
Beiträge
740
@ayngush das möchte ich in Frage stellen. Das ist schon zu HTML4 Zeiten gängiger Standard gewesen mit form action... nenne mir doch bitte einen Browser wo genau diese Fälle auftreten die du beschrieben hast.
 

ayngush

Lt. Commander
Dabei seit
Okt. 2007
Beiträge
1.387
Firefox z.B. sendet kein Form "on Enter", wenn kein "type=submit" (Absendebutton) in der Form vorhanden ist.
Wenn man ein "display:none type=submit" integriert, sendet der Chrome das Form dann nicht mehr "on Enter".

Ist mir aber auch zu müßig die Recherche für dich hier anzustellen, google kannst ja sicherlich selber bedienen.
 

Tokolosh

Lieutenant
Dabei seit
März 2013
Beiträge
711
Top