HTML Programmierung

[Tony449]

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

 

[xenon-seven]

HTML ist keine Programmiersprache. Du wirst dazu javascript benötigen.

 

[Lawnmower]

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]

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]

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

 

[abcddcba]

Wurde doch schon gesagt, pack es in eine Form und nutze die onClick Methode:

<form>
  <input type="button" value="DEIN_BUTTON_TEXT_HIER"
         onclick="window.location.href='DEINE_URL_HIER'" />
</form>

Wenn du allerdings per Enter Taste abschicken willst, dann wohl nur per JS. Google ist dein Freund :
https://www.w3schools.com/howto/howto_js_trigger_button_enter.asp

 

[Tony449]

Ich habe jetzt folgendes Script, es funktioniert aber noch nicht wo ist da der Fehler?

<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]

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]

Es funktioniert trotzdem nicht, irgendwo muss ein Fehler sein.
In Zeile 10 kommt die Ziel URL rein, sonst weiß das Programm ja nicht wohin es gehen soll, oder ist die Zeile falsch definiert?

Du musst Debuggen selbst lernen.

Ich bin Selbstständig und mir fehlt die Zeit dafür, deshalb frage ich ja in dem Forum hier nach.

 

[Tokolosh]

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

'Hier_die_URL'elem.value;

wo kommt elem her? Außerdem wird in Javascript mit '+' konkateniert.

 

[Tony449]

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]

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

<!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

<!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.

 

[Tony449]

Mit dem oberen Code funktioniert es jetzt, danke dir.

 

[HayaBussa]

Hilfreich könnte auch ein Blick in https://wiki.selfhtml.org/ sein ;-)

Gruß

 

[DubZ]

wieso eigtl alles per Javascript? Was spricht denn gegen das gute alte <form action="url"> ?

 

[ayngush]

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_]

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]

@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]

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]

@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.

HTML4 ist aus dem letzten Jahrhundert. Was damals "standard" war, muss noch lange nicht heutzutage als solcher gesehen werden.