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;
}
});