Błędny kod addEventListener

Question

const feed = document.querySelector( 'feed' );

feed.addEventListener( 'keydown', ( e ) => {
	evt.preventDefault();
	
	if (e.key.length == 1 && e.key != ' ') {
		feed.value == e.key;
	}
});

Witam, nie mogę dojść do błedu.

Comments

@Nearr,

i prawidłowo - domyślnym działaniem jest wpisanie znaku w polu tekstowym. Zablokowałeś to przecież.

---

  @CubeStorm, napisał wyżej.

---

 

            <div class="controls-input-section" id="feed-section">
              <span class="input-text">Feed</span>
              <input type="text" id="feed" class="controls-text-fields" maxlength="1" style="caret-color: transparent">  
            </div>

const feed = document.querySelector('#feed');

feed.addEventListener('keydown', (e) => {
	evt.preventDefault();
	
	if (e.key.length == 1 && e.key != ' ') {
		feed.value == e.key;
	}
});

cel i zamiar czego? Jeśli chodzi i cel kodu, to podałem go wyżej 

---

Najlepszym rozwiązaniem jest używanie tagów <script> .... </script> (lub <script src"..."></script>) tuż przed znakiem </body>.

@CubeStorm, nie bardzo. Są lepsze rozwiązania, takie jak użycie atrybutu async lub defer, albo umieszczenie skryptu obok <link>a z atrybutem prefetch lub preload. Można też sam kod skryptu owinąć w funkcję wywoływaną na zdarzenie DOMContentLoaded lub Load.

---

Racja, dawno z nich nie korzystałem i wyleciały mi z głowy.

Answer 1

Tutaj moja wersja:

https://codepen.io/CubeStorm/pen/yLMjmoR

 

Błąd był tutaj:

feed.value == e.key;

porównywałeś zamiast nadawać wartość.

Comments

Nic się nie dzieje - nie ma zmiany litery.

---

Mój błąd, już jest poprawnie.

---

nie ważne działa, dziękuję

Answer 2

Ten zapis

const feed = document.querySelector('#feed');
 
feed.addEventListener('keydown', e => {
    if (feed.value.length >= 1) {
        feed.value = e.key;
    }
});

 

powoduje "pojawianie" się

 itd.

chyba, że taki był Twój zamiar. 

 

Ten zapis "chroni" przed pokazywaniem się w polu input wyżej wymienionych.

(plus nie wymaga maxlength, feed.value.length, "zatrzymuje" działanie klawiszy Delete i Backspace)

<div class="controls-input-section" id="feed-section">
  <span class="input-text">Feed</span>
  <input type="text" id="feed" 
         class="controls-text-fields" 
         style="caret-color: transparent">  
</div>

document.addEventListener('DOMContentLoaded', () => {
  const feed = document.querySelector('#feed');

  feed.addEventListener('beforeinput', (e) => {
    e.preventDefault();
    if (e.data != null && e.data != ' ') feed.value = e.data;
  });
});

wersja z keydown  

  feed.addEventListener('keydown', (e) => {
    e.preventDefault();
    const not_allowed_key = [
      ' ', 'shift', 'escape', 'control', 'alt',
      'tab', 'capslock', 'meta', 'insert', 'delete',
      'backspace', 'enter', 'altgraph', 'arrowleft',
      'arrowright', 'arrowup', 'arrowdown', 'numlock'
    ];

    if (! not_allowed_key.includes(e.key.toLowerCase())) { 
      feed.value = e.key;
    }
  });

 

Comments

Trochę średnio jest ze wsparciem przeglądarek dla eventu beforeinput.

---

Chyba nie jest tak tragicznie  

beforeinput browser compatibility

---

Wsparcie pokazane w tabelce MDN jest dla większości przeglądarek określone jako tak lub nie. Na caniuse jest tabelka uwzględniająca wersje poszczególnych przeglądarek i wsparcie jest dostępne dopiero od kilku miesięcy do roku. Natomiast, sądząc po kolejności wykonywania eventów klawiatury - beforeinput występuje po keydown - możliwe, że da się go w jakiś sposób polyfillować. Dlatego napisałem, że średnio ze wsparciem.