Konfiguracja input type="text"

Question

Wtam,
Robię ustawienia do gry, i chcę zrobić zakładkę sterowanie.

Na zdjęciu można zobaczyć kreskę, która pojawia się i znika po kliknięciu na input text.

Na tym zdjęciu nie widać tej kreski pomimo kliknięcia na pole tekstowe

Czy jest możliwość by ta kreska się w ogóle nie pojawiała?

Answer 1

Witaj

Chodzi Ci o taki efekt? Jeśli tak to masz już rozwiązanie

Comments

Dokładnie tak, dziękuję :)

---

Efekt ciekawy (i stąd plusik), ale IMO mało użyteczny dla usera - w końcu dobrze wiedzieć, gdzie się kliknęło.

---

dlatego ustawiłem :focus, przez co po klliknięciu zmienia kolor na jaśniejszy

---

A co da zmiana koloru inputa na focus, skoro przy niewidocznym kursorze user nie wie, gdzie ten kursor się znajduje? Załóżmy, że user chce zmienić tekst w środku zdania - skąd ma wiedzieć, gdzie ten kursor jest jeśli np. użyje strzałek na klawiaturze zamiast myszki? Ma liczyć ile razy wciska klawisz strzałki? To dość niewygodne.

---

To nie będzie pole na zdanie. To będą ustawienia sterowania, czyli max 1 litera

---

Przed

Po

Nie znaczna zmiana, ale user będzie wiedział o co chodzi. Plus jeszcze ustawiłem cursor: pointer;

---

Skoro to ma być jakaś pojedyncza litera, przeznaczona do konfiguracji, to może lepiej użyć tutaj listy opcji w formie selecta, albo radioboxów?

Plus jeszcze ustawiłem cursor: pointer;

W jaki sposób to niweluje problem z widocznością kursora w inpucie?

---

Chodzi mi to, że user będzie mógł sobie wybrać dowolną literę lub liczbę jaką będzie chciał.
np. gra League of Legends. user może sobie wybrać pod jakim przyciskiem chce użyć umiejętności. Nie wygodne by było wybierać z listy jaki przycisk chcesz przypisać

---

przykład

---

Nie rozumiem jaki problem powoduje migający kursor w inpucie. Może zamiast rezygnować z kursora, pokaż okienko, gdzie będzie można wpisać znak dla danej opcji klawiszem z możliwością nadpisywania go? Coś takiego jak np. tutaj: https://keycode.info/

---

Nie rozumiesz o co mi chodzi..

Answer 2

Daj kod. Czy masz ustawiony placeholder dla pola?

https://developer.mozilla.org/pl/docs/Web/HTML/Element/Input

Comments

<input type="url" name="Skin-URL" maxlength="31" placeholder="Skin URL" placeholder="#ffffff;" />
                    <input type="text" name="Nickname" maxlength="20" placeholder="Nickname" />
                    <input type="text" name="Tag" maxlength="20" placeholder="Tag" />

input[name=Skin-URL] {
    background-color: #111111;
    color: #cecece;
    outline: 1px;
    border: 1px solid #080808;
    border-radius: 2px;
    transform: translate(4.5%, 340%);
    width: 301px;
    height: 20px;
    padding: 5px;
    opacity: 0.9;
  }
  
  input[name=Nickname] {
    background-color: #111111;
    color: #cecece;
    outline: 1px;
    border: 1px solid #080808;
    border-radius: 2px;
    transform: translate(7.5%, 110%);
    width: 175px;
    height: 20px;
    padding: 5px;
    opacity: 0.9;
  }
  
  input[name=Tag] {
    background-color: #111111;
    color: #cecece;
    outline: 1px;
    border: 1px solid #080808;
    border-radius: 2px;
    transform: translate(21%, 110%);
    width: 100px;
    height: 20px;
    padding: 5px;
    opacity: 0.9;
  }

Normalnie mam ustawiony placeholder, ale na potrzeby pytania musiałem usunąć go, ponieważ na zdjęciu nie było by widać tej kreski