HTML Button soll Tastatur-Taste simulieren?

Moin, ich würde gerne einen einfachen Button in HTML so programmieren, dass er onclick=" " (?) meine rechte Pfeiltaste (Tastatur) simuliert.
Kann mir da jemand helfen? :-)

2 Antworten

regex9

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, Technik, HTML

15.05.2020, 08:59

Vielleicht versuche ich es beim falschen Slider auf der von dir verlinkten Seite (ich beziehe mich auf die Ansicht mit den großen Hintergrundbildern, zu denen rechts unten eine Miniaturansicht als Navigation eingebaut ist), doch via Tastatur lässt sich da jedenfalls nichts bewegen.

Wie dem auch sei, der korrekte Weg wäre es, bei Klick auf die von dir eingebauten Buttons die JavaScript-Funktion aufzurufen, die den nächsten Slide ansteuert. Den Workaround über Key-Events solltest du nicht gehen. Auf einem mobilen Endgerät bspw. hast du keine Tastatur und deine Buttons würden dementsprechend nicht funktionieren.

Für den Revolution Responsive jQuery Slider gibt es eine Dokumentation, die ebenso eine öffentliche Schnittstelle anbietet. Über die würde ich es zunächst versuchen. Da du, wie du schreibst, Laie bist, wäre es dabei besser, wenn du dir zusätzliche Hilfe von deinem Kollegen holst (der vermutlich etwas mehr Ahnung hat?). JavaScript-Kenntnisse sind hierbei vonnöten.

hannoverfilmt

Fragesteller

15.05.2020, 10:53

Nein, das ist wie gesagt nur das ursprüngliche Template. Unten gibt es die Möglichkeit bei .navigaton die KeyboardNavigation auf 'on' oder 'off' zu setzen. Auf dem Smartphone habe ich eine Touch-Geste eingebaut, das ist nicht das Problem. Daher würde mich wirklich interessieren, wie der Code für die Simulation einer Taste lautet.

regex9

15.05.2020, 11:23

@hannoverfilmt

Also reden wir hier sogar von unterschiedlichen Seiten.

Somit hättest du aber schon einen Startpunkt für eine Suche, denn gerade diese Tastenevents müssten ja im Skript aufgefangen werden und an dieser Stelle fände man auch den Aufruf der Funktionen, die den nächsten Slide ansteuern.

Dies sollte der bevorzugte Lösungsweg sein.

Daher würde mich wirklich interessieren, wie der Code für die Simulation einer Taste lautet.

Da du ja sicherlich eh schon jQuery eingebunden hast, hier ein Beispiel mit jQuery:

const keyEvent = $.Event("keypress", { which: 65, keyCode: 65 });
$(document).trigger(keyEvent);

Dies würde die Taste A drücken. Für Pfeiltasten müssten die Keycodes hingegen 37 (links) und 39 (rechts) lauten.

hannoverfilmt

Fragesteller

15.05.2020, 11:39

@regex9

Geil! Vielen Dank! - Anschlussfrage: Was binde ich im HTML des Buttons ein um dieses jQuery-Event zu triggern? :-)

hannoverfilmt

Fragesteller

15.05.2020, 12:04

@hannoverfilmt

Also den Code binde ich unten in die jquery.js ein - aber was baue ich in das HTML des Buttons ein? (Sorry für die unprofessionelle Ausgangslage, haha...)

regex9

15.05.2020, 12:08

@hannoverfilmt

Das Skript selbst muss innerhalb eines script-Blocks stehen, vorzugsweise vor dem schließenden body-Tag.

Beispiel für den linken Button:

<script>
  $("#id-of-left-button").click(function() {
    const keyEvent = $.Event("keypress", { which: 37, keyCode: 37 });
    $(document).trigger(keyEvent);
  });
  // and here almost the same for right button ...
</script>

Der Button sollte hierbei eine ID haben, wie oben gegeben (ohne Raute).

<button id="id-of-left-button" type="button">Previous</button>

hannoverfilmt

Fragesteller

15.05.2020, 12:27

@regex9

Irgendwie passiert da gar nichts... Kann ich Dich zufällig bezahlen und Du schaust Dir das ganze Spektakel hier mal per Bildschirmfreigabe an?

regex9

15.05.2020, 12:47

@hannoverfilmt

Zuerst würde ich prüfen, ob in der Browserkonsole Fehlermeldungen angezeigt werden. Wenn nicht, kannst du einmal diesen Code-Block noch hinter dem bisherigen setzen:

$(document).on("keypress", function(evt) {
  alert("key pressed: " + evt.which);
});

Für jedes Key-Event sollte daraufhin ein Fenster aufploppen, welches Auskunft über den getätigten Tastendruck gibt.

Arbeitsaufträge nehme ich auf GF nicht an. Wenn sich keine Lösung finden lässt, solltest du auf dafür ausgerichteten Portalen (wie Fiverr) nach Entwicklern suchen, die das Problem für dich lösen.

hannoverfilmt

Fragesteller

15.05.2020, 13:21

@regex9

Unglaublich hilfreich, herzlichsten Dank!

Ireeb

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, Technik, Technologie

14.05.2020, 22:25

Was genau willst du damit bezwecken? Du kannst mit HTML/JavaScript quasi nichts außerhalb des Browsers tun, also auch keine Tastenanschläge an das System übermitteln.

Woher ich das weiß:Berufserfahrung – Tätigkeit als Webentwickler in einer Digitalagentur

hannoverfilmt

Fragesteller

14.05.2020, 22:31

Ich habe eine Seite von einem Kollegen bekommen, die auf Bootstrap basiert und einen Revolution Slider hat. Selbst bin ich nur ein Webdesign-Laie und versuche irgendwie die vorhandenen Buttons (Arrows) so hinzubekommen, dass sie ein Layer/Frame weitergehen. Quasi zur Navigation der Seite. Weil das aber (mangels meiner Kompetenz) nichts wird, dachte ich mir, ich nutze die Keyboard-Navigation und gebe dem rechten Button/Arrow die Aufgabe meine rechte Tastatur-Pfeiltaste zu simulieren...
Das war das ursprüngliche Template, mir ist es wie gesagt gelungen links und rechts Arrow-Buttons einzubauen, die aber logischerweise keine Funktion haben. Ich möchte damit einen Layer weiterkommen, mit # o.Ä. funktioniert es auch nicht.
http://themes.semicolonweb.com/html/canvas/rs-demo-slider-photography.html

Hey,

ich würde gerne eine Unterseite per Button-Klick öffnen. Wie kann ich das machen?

<body>

<button class="Regelwerk" OnClick="location.href="regelwerk.html>REGELWERK</button> <br>

<button class="Updates" OnClick="location.href='http://www.google.de'">UPDATES</button> <br>

<button class="Impressum" OnClick="location.href='http://www.google.de'">IMPRESSUM</button>

</body>

...zur Frage

GTA 5 auf Ps4 rechte Pfeiltaste geht nicht?

Hey,ich habe heute heute mit GTA angefangen und muss ins Los Santos Customs ,da steht dann bei mir:,,Drücke die rechte Pfeiltaste um dein Auto zu reparieren usw..., ich habe daraufhin auf diese Taste gedrückt aber nichts passiert!Die Taste ist 100% auch nicht kaputt!Genau das gleiche ist auch in den Waffenläden und beim Friseur.Kann mir bitte jemand helfen?

...zur Frage

Warum über JavaScript Events?

man kann ja in seinen html code onclick oder was auch immer für ein Event hinschreiben.

ich sehe trotzdem bei vielen Profis immer das hier

Html : 

<body>
<button id='MeinButton'>Senden</button>
</body>

js: 

document.querySelector('#MeinButton').addEventListener('click', MeineFunktion);

function MeineFunktion(){
event.preventDefault();
Alert(1);
}

einfacher wäre das hier

<body>
<button onclick='MeineFunktion();' id='MeinButton'>Senden</button>
</body>
function MeineFunktion(){
event.preventDefault();
Alert(1);
}

Und wieso muss man prevent default hinschreiben ?
Was genau macht der browser denn by default / standardmäßig das es sonst nicht funktioniert ?

...zur Frage

Javascript Button erstellen?

Hallo,

ich habe einen Button in HTML erstellt und möchte, dass dieser per Click, die Farbe eine Textelements in Schwarz ändert. Den Button habe ich erstellt, komme aber bei der Funktion nicht weiter, kann jemand helfen? Danke im Voraus.

<button type="button" onclick=document.getElementById('Liste').style.color = 'black'">Drück mich!</button>

Aktueller Stand

...zur Frage

HTML (JS/PHP) mit Button Zähler in .txt Datei schreiben?

Hallo,

ich habe auf einer HTML Seite einen einfachen Button, der ein onclick-event auslöst.

Nun soll dieser Button zusätzlich noch einen Zähler immer um eins Hochzählen und das ganze in eine Textdatei schreiben.

Geht warscheinlich nicht mit JS sondern nur mit PHP, oder?

Hat hier jemand ein Beispiel für sowas?

Wäre sehr dankbar!

Danke und Gruß

Fabio

...zur Frage

HTML Button in Table die Reihe auswählen?

Moin,

ich habe eine Table in React JSX. Und möchte dort mit einem Button im Table die Reihe auswählen. Nicht mit reihe anklicken oder checkbox, sondern einem Button.

Hab schon selber einiges versucht aber bin eindeutig zu doof.

Wenn mir da einer Helfen kann, wäre das Super!.

Wiegesagt es ist nicht pures HTML sondern React JSX.

...zur Frage

Undisabled eines Buttons durch JavaScript?

Hallo,

ich möchte mit Hilfe von JavaScript einen Button, der vorher disabled war, wieder aktiviert, sodass er undisabled ist. Die funktioniert leider nicht und ich habe kein Ahnung an was es liegen könnte.

Mein HTML Code:

<body>

</body>

}

Mein Javascript Code:

let button = document.getElementbyid('button' );

function Test() {

button.disabled = false;

}

Weiß jemand an was es liegen könnte?

...zur Frage

HTML-Code für Wurzelziehen/Radizieren?

Hallo,

ich bin relativ neu im Gebiet programmieren und brauche Hilfe. In unserer Info-AG haben wir die Aufgabe bekommen, einen Taschenrechner mit den Rechenzeichen +, -, *, /, ** und √ mit einem HTML-Code zu programmieren.

Das Problem, wo ich festhänge ist das √.

Ich weiß einfach nicht, wie ich es in meinen Code einbauen kann.

Hier ist, was ich soweit habe (Wurzel-Button funktioniert wie gesagt nicht):

<!DOCTYPE html>
<html>
  <head>
    <h1>Taschenrechner</h1>
    <style>
      h1 {
        font-family: Arial;
        text-align: center;
        color: navy;
      }

      body {
        font-family: Arial;
        text-align: center;
      }

      input {
        width: 100px;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <form name="Taschenrechner">
      <input type="button" value="0" onClick="document.Taschenrechner.erg.value+='0'">
      <input type="button" value="1" onClick="document.Taschenrechner.erg.value+='1'">
      <input type="button" value="2" onClick="document.Taschenrechner.erg.value+='2'">
      <input type="button" value="3" onClick="document.Taschenrechner.erg.value+='3'">
      <input type="button" value="4" onClick="document.Taschenrechner.erg.value+='4'">
      <input type="button" value="5" onClick="document.Taschenrechner.erg.value+='5'">
      <input type="button" value="6" onClick="document.Taschenrechner.erg.value+='6'">
      <input type="button" value="7" onClick="document.Taschenrechner.erg.value+='7'">
      <input type="button" value="8"
 onClick="document.Taschenrechner.erg.value+='8'">
      <input type="button" value="9"
onClick="document.Taschenrechner.erg.value+='9'">
      <label1>Rechensymbole:</label1>
      <input type="button" value="+" onClick="document.Taschenrechner.erg.value+='+'">
      <input type="button" value="-" onClick="document.Taschenrechner.erg.value+='-'">
      <input type="button" value="*" onClick="document.Taschenrechner.erg.value+='*'">
      <input type="button" value="/" onClick="document.Taschenrechner.erg.value+='/'">
      <input type="button" value="**" onClick="document.Taschenrechner.erg.value+='**'">
      <input type="button" value= "Wurzel"
onClick:="document.Taschenrechner.erg.valueMath.sqrt='x'">
      <input type="button" value="=" onClick="document.Taschenrechner.erg.value=eval(document.Taschenrechner.erg.value)">
      <label2>Ergebnis:</label2>
      <input type="textfield" id="erg" value="">
      <input type="reset" value="Reset">
    </form>
  </body>
</html>

...zur Frage

Warum funktioniert dieser code nicht?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Beta</title>
    <script>
        const bodyElement = document.querySelector("body");

        function setColorBlue() {
            bodyElement.background-color = "blue";
        };

        function setColorRed() {
            bodyElement.background-color = "red";
        };

        function setColorGreen() {
            bodyElement.background-color = "green";
        }
    </script>
</head>
<body>
    <div class="color-picker">
        <button onclick="setColorBlue()">Blue</button>
        <button onclick="setColorRed()">Red</button>
        <button onclick="setColorGreen()">Green</button>

    </div>
</body>
</html>

...zur Frage

Musik lauter machen in JS?

Hi Liebe Community,

Ich habe folgendes Problem:

Ich habe mit JavaScript und HTML einen Button gemacht, der Musik spielt. Jetzt würde ich es gerne so machen, das, wenn man auf zwei andere Button drückt, einer plus und minus, die Musik immer ein bisschen lauter und/oder ein bisschen leiser wird (halt so, das man mehrmals auf den Button drückt, damit es pro Click ein bisschen lauter/leiser wird , aber ich komme nicht weiter, könnt ihr mir helfen?

Danke im voraus, für die Hilfe

Quellcode:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button onclick="playMusic()">starte Musik</button>
    <button onclick="volumeeUp()">+</button>
    <button onclick="volumeDown()">-</button>
</body>
<script>
    const audio = new Audio();
    audio.src = "musik.mp3"
    audio.loop = true;

    function playMusic() {
        audio.play();
    }

    function volumeUp(){
        audio.volume = +1;
    }

    function volumeDown(){
        audio.volume = -1
    }
</script>
</html>

...zur Frage

Mit Html einen Button auslösen der Audio asbpielt?

Wie ist es möglich einen Button zu Programmieren der eine Audio Datei auslöst.

...zur Frage

HTML / CSS: E-Mail-Button geht nicht?

Moin,

ich habe in HTML und CSS folgenden Button:

<a href=Link class button>YouTube</a>

(Anführungszeichen sind im Code da)

Den gleichen Button habe ich viermal mit anderer div und habe die Buttons in CSS gestylt.

Ein Button von den Vieren geht und bringt mich zum Link. Obwohl alle identisch bis auf Namen und Link sind, funktioniert nur ein Button.

Danke und entschuldigt, falls meine Fragen nerven. 😕

...zur Frage

wie kann ich in javascript eine funktion ohne button auslösen?

Hallo,

ich bin noch Anfänger in javascript und wollte fragen wie ich eine Funktion in javascript auslöse nachdem meine HTML Seite geladen hat, ohne explizit einen button mit einer onclick zu schreiben der diese Funktion aufruft. Die Funktion kriegt ein Parameter im HTML Teil übergeben, was dann in etwa so aussieht:

<button id="drücken" onclick="Funktion({{result}})"></button>

ich kriege das nur durch diesen button im html teil hin.

<tbody id="Eintrag"></tbody>

der Parameter wird iteriert und in eine Tabelle gehängt

Javascript:

function Funktion(result){

for(var key in result)

key an Eintrag anhängen.

}

Das funktioniert auch alles gut, nur wird das alles nur ausgeführt wenn ich explizit auf den button drücke. verstehe auch nicht wie das sonst gehen würde. Ich kann ja nicht beispielsweise ein window.onload auf der javascript-Datei schreiben weil ich ja noch den result parameter in der HTML Datei übergeben muss.

Gibt es eventuell eine Möglichkeit innerhalb des HTML Datei dann sowas zu schreiben?:

window.onload = Funktion({{result}});

Bei mir kennt er dann nicht Funktion weil es auf der externen Javascript-Datei liegt.

...zur Frage

HTML Taschenrechner?

Hey ich habe einen HTML Taschenrechner von einer Website kopiert von einer Website und ich will jetzt den Taschenrechner so programmieren das er nicht über hundert rechen kann bzw. Eine Fehler Meldung dann kommt so das immer ein Fehler kommt wenn ich über hundert rechnen tun ich hab schon im Internet mich belesen aber finde nix leider vielleicht könnt ihr mir helfen

<html>
<head>
<title>HTML-Taschenrechner </title>
</head>
<body bgcolor= "# 000000" text= "gold">
<form name="calculator" >
<input type="button" value="1" onClick="document.calculator.ans.value+='1'">
<input type="button" value="2" onClick="document.calculator.ans.value+='2'">
<input type="button" value="3" onClick="document.calculator.ans.value+='3'">
<input type="button" value="+" onClick="document.calculator.ans.value+='+'">
<input type="button" value="4" onClick="document.calculator.ans.value+='4'">
<input type="button" value="5" onClick="document.calculator.ans.value+='5'">
<input type="button" value="6" onClick="document.calculator.ans.value+='6'">
<input type="button" value="-" onClick="document.calculator.ans.value+='-'">
<input type="button" value="7" onClick="document.calculator.ans.value+='7'">
<input type="button" value="8" onClick="document.calculator.ans.value+='8'">
<input type="button" value="9" onClick="document.calculator.ans.value+='9'">
<input type="button" value="*" onClick="document.calculator.ans.value+='*'">
<input type="button" value="/" onClick="document.calculator.ans.value+='/'">
<input type="button" value="0" onClick="document.calculator.ans.value+='0'">
<input type="reset" value="Reset">
<input type="button" value="=" onClick="document.calculator.ans.value=eval(document.calculator.ans.value)">
Solution is
<input type="textfield" name="ans" value="">
</form>
</body>
</html>

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen