[es] - PHP forma i input u polje sa fokusom

pakito
Paun Es Durlic
kustos etnolog (u penziji!) i programer
naivac
Majdanpek * Pančevo

Član broj: 91953
Poruke: 283
*.dynamic.isp.telekom.rs.

Sajt: www.paundurlic.com/vlaski..

+3 Profil

PHP forma i input u polje sa fokusom

^{08.10.2024. u 13:19 - pre 6 meseci}

Videti prvo priloženu sliku
[url=mailto:https://www.paundurlic.com/img/input-u-fokus.png][/url]
Klikom na ’img ă’ u polje 1 forme ”pretraga” unosim ovo slovo za jedan specifičan vlaški glas, za koji nemamo slovo na standardnoj tastaturi.

Code:
<a href="javascript:void(0);" onclick="replaceText('ă', document.pretraga.vlaskarec1 ); return false;"> <img src="a1_malo.gif"></a>

Ali, ovi znaci su potrebni i za polje 3 i 4.
Kako da ih unesem u ova polja kada su ona u fokusu, ondosno kad na njih spustim miša, i počnem da kucam reć ili frazu?
Moje rešenje ”zakucava” unos u prvo polje, name = ’vlaskarec1’, naslućujem da to treba rešiti nekako preko ”id” i ”focus”, ali ja to kao programer naivac ne umem, a vremena mi je sve manje ostalo da to sada učim.

http://www.paundurlic.com/vlaski.recnik/pretraga.php

Odgovor na temu

Panta_
Aleksandar Pantić
Kragujevac

Član broj: 214959
Poruke: 801

+164 Profil

Re: PHP forma i input u polje sa fokusom

^{08.10.2024. u 20:08 - pre 6 meseci}

Dodaš event listener "focus" na te inpute, kada klikneš na određen input postaviš class="active" atribut, zatim kada klikneš na slovo "ă", uneseš isto u input koji ima klasu active. Evo primer:

Code (javascript):

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title></title>

  <style>

    ul {

      display: flex;

      gap: 10px;

      list-style: none;

    }

    li {

      padding: 5px 10px;

      background: #eeeeee;

    }

    li:hover {

      cursor: pointer;

      background: #d9d9d9;

    }

    form {

      display: flex;

      flex-direction: column;

      gap: 10px;

    }

  </style>

</head>

<body>

  <ul>

    <li onclick="document.querySelector('.active').value += 'a'">a</li>

    <li onclick="document.querySelector('.active').value += 'b'">b</li>

    <li onclick="document.querySelector('.active').value += 'c'">c</li>

    <li onclick="document.querySelector('.active').value += 'd'">d</li>

  </ul>

  <form>

    <div>

      <label>Input 1:</label>

      <input type="text">

    </div>

    <div>

      <label>Input 2:</label>

      <input type="text">

    </div>

    <div>

      <label>Input 3:</label>

      <input type="text">

    </div>

    <div>

      <label>Input 4:</label>

      <input type="text">

    </div>

  </form>

  <script>

    inputs = document.querySelectorAll('input[type="text"]');

    for (let input of inputs) {

      input.addEventListener("focus", (event) => {

      for (let i of inputs) {

        i.classList.remove("active");

      }

        event.target.setAttribute("class", "active");

      });

    }

  </script>

</body>

</html>

Odgovor na temu