Hi,
I have this code:
inputform.addEventListener('keypress', function(e) {
const tgt = e.target;
if (tgt.id==="usermsg") {
if (e.which == 13 && !e.shiftKey && tgt.value) {
tgt.value = '';
tgt.setSelectionRange(0,0);
}
}
});
as you hit ENTER its supposed to clear the textarea input and return the cursor to the start but it wont do it. Instead, the cursor stays at the second line. Here is the fiddle: https://jsfiddle.net/xbc0vong/
why is that?
Thank you.
Use e.preventDefault(); to avoid default behavior.
Try this
inputform.addEventListener('keypress', function(e) {
const tgt = e.target;
if (tgt.id==="usermsg") {
if (e.which == 13 && !e.shiftKey && tgt.value) {
e.preventDefault();
tgt.value = '';
tgt.setSelectionRange(0,0);
}
}
});
Code sandbox => https://jsfiddle.net/pa6cjweo/1/
It appears that a slight delay is needed after the .value attribute has been cleared. Using setTimeout() worked.
const inputForm = document.forms[0];
inputForm.addEventListener('keypress', (e) => {
const tgt = e.target;
if (tgt.id === 'userMsg' && e.keyCode === 13) {
tgt.value = '';
setTimeout(() => {
tgt.focus();
tgt.setSelectionRange(0, 0);
}, 0);
}
});<form id="inputForm">
<textarea id="userMsg"></textarea>
</form>