• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Mit einer Leiste 4 <Input> bedienen

OlliK

Neues Mitglied
Hallo Leute,

wie auf dem Foto zusehen ist, gibt es in diesen Beispiel 4 <Input> Felder (ist immer unterschiedlich, je nach Frage). Weiter unten habe ich eine Leiste mit Sonderzeichen. Die Sonderzeichen-Leiste kann ich momentan nur für ein <input> definieren. Hat jemand eine Lösung, wie ich die Leiste für alle 4 <Input> definieren kann?
Mit freundlichen Grüßen
 

Anhänge

  • 822960C0-96CB-464F-8049-5F3E9811799F.png
    822960C0-96CB-464F-8049-5F3E9811799F.png
    692,9 KB · Aufrufe: 8

Sempervivum

Senior HTML'ler
Anscheinend hast Du ja schon eine Lösung für ein Input. Poste diese, dann kann man dir wahrscheinlich relativ leicht sagen, wie Du das auf mehrere Inputs umstellen kannst.
 

OlliK

Neues Mitglied
Die <Input>‘s werden wie folgt definiert:
<input type="text"
id="demo_input_<?php echo($_SZeichen); ?>"
name="<?php echo($_SZeichen); ?>" usw.

Definiert über id="[email protected]" usw. (das nächste Input hat dann [email protected])

Die Leiste mit der den Sonderzeichen sieht so aus:
<a class="ubb_button2" href="#" onclick="bbcode_in_s('demo_form1','[email protected]','Ω');" title="Ω">Ω</a>

Die Leiste kann nur das erste Input bedienen, weil es so definiert ist. Irgendwie fällt mir keine Lösung ein wie ich das so umsetzen kann, daß das aktive Input gleich der Leiste definiert ist.

ich weis nicht ob es eine Lösung über JavaScript gibt, da habe ich kein Plan.

Mfg
 

Sempervivum

Senior HTML'ler
Versuche dieses Javascript:
Code:
        /* Hilfsfunktion für die Modifikation beim Klick-Event: */
        function my_bbcode_in_s(idForm, character) {
            /* Element, das zuletzt den Focus hatte, bereit stellen: */
            const lastFocussed = document.querySelector('#' + idForm + ' input.last-focussed');
            /* Ist eines vorhanden: Die originale Funktion für das Einfügen des Zeichens aufrufen: */
            if (lastFocussed) bbcode_in_s(idForm, lastFocussed.id, character)
        }

        /* Eventlistener für Klick registrieren: */
        window.addEventListener('click', event => {
            /* Wurde ein Eingabefeld in einem Formular geklickt? */
            if (event.target.matches('form input')) {
                /* Element, das zuletzt den Focus hatte, bereit stellen: */
                const lastFocussed = document.querySelector('form input.last-focussed');
                /* Ist eines vorhanden: Klasse "last-focussed" löschen: */
                if (lastFocussed) lastFocussed.classList.remove('last-focussed');
                /* Klasse "last-focussed" beim aktuell geklickten Element setzen: */
                event.target.classList.add('last-focussed');
            }
        });
Das HTML musst Du dafür so ändern:
Code:
        <a class="ubb_button2" href="#" onclick="my_bbcode_in_s('demo_form1','Ω');" title="Ω">Ω</a>
        <a class="ubb_button2" href="#" onclick="my_bbcode_in_s('demo_form1','x');" title="x">x</a>
        <a class="ubb_button2" href="#" onclick="my_bbcode_in_s('demo_form1','y');" title="y">y</a>
 

zorro

Mitglied
Na ja, spätestens dann, wenn man die Tabulatortaste benutzt, um von Input zu Input zu springen, versagt die "Lösung"

Ich weiß auch nicht, warum man sich das Leben immer so schwer macht. Klasse setzen, Klasse löschen, im HTML "onclick Events" definieren usw.

So wurde es vor ein paar Jahren gemacht, wir schreiben das Jahr 2022!!

Das "role=button" ist der Optik geschuldet...


HTML:
<!DOCTYPE html>
<html lang=de>
<meta charset=UTF-8>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://unpkg.com/@picocss/[email protected]/css/pico.min.css">
<title>None</title>
<body class=container>
<h1>Test</h1>
<form >
  <input>
  <input>
  <input>
  <a href="#" role="button">Ω</a>
  <a href="#" role="button">+</a>
  <a href="#" role="button">-</a>
  <a href="#" role="button">¹</a>
  <a href="#" role="button">²</a>
</form>
<script>
document.querySelectorAll('a')
  .forEach( el =>
    el.addEventListener( 'mousedown', (evt) => {
      evt.preventDefault()
      let act = document.activeElement
      act.tagName == 'INPUT'
      ? act.value += evt.target.innerText : null
      act.focus()
    }))
</script>
 
Werbung:

Neueste Beiträge

Oben