How to clear a textarea value in jQuery?

Question

I'm trying to validate keycode entry by adding an alert when a user types a key that isn't expected, and then clearing the text area. The alert functions correctly but the text area isn't clearing.

I've checked the documentation here, but I can't see an area with my .val() line. I've also tried this: $("#noteNumberInput").attr('value', "");

Scenario: I type 1-9 in the text box and get no alert (works fine), if I type a letter a-z for example, the alert pops up but the letter remains in the text box.

EDIT:

Something I've noticed is that it does clear the textarea after the first key. If I type the letter 'a' and then 'b', the 'a' is removed and replaced with a 'b'.

HTML:

<textarea id="noteNumberInput" placeholder="Note number"></textarea>

JS:

var noteNumberInput = document.getElementById("noteNumberInput");

//VALIDATE NOTE NUMBER TEXTAREA
function validate(key) {
    var keycode = (key.which) ? key.which : key.keyCode;
    //comparing pressed keycodes
    if (keycode === 8 || (keycode >= 48 && keycode <= 57)) {
        return true;
    }
    if (keycode < 48 || keycode > 57) {
        alert("Please only enter the note number e.g. 1, 2..14 etc.");
        $("#noteNumberInput").val("");
        return false;
    }
}

noteNumberInput.addEventListener("keydown", validate);

The alert shows when an incorrect key is pressed, and then after I close the alert the charcterappears in the textbox. — Xander, Apr 29 '17 at 11:27
@webbm Yeah that's working now, thank you. Would you like to submit it as an answer so I can accept? — Xander, Apr 29 '17 at 11:28
for those having problem with event handlers, here is a workaround answer. https://stackoverflow.com/questions/8284960/clear-text-area/54265441#54265441 — Neo, Jan 19 '19 at 08:50

score 2 · Answer 1 · answered Apr 29 '17 at 11:18

2

When you do $("#noteNumberInput").val('');, it removes all the content of the textarea, so if that's not what is happening, the problem is probably somewhere else.

answered Apr 29 '17 at 11:18

dekts

586
2
14

Yeah i figured that was the case but clearing the text box is the last line of the function except for return false so it shoudl clear the box and finish – Xander Apr 29 '17 at 11:20

brk · Answer 2 · 2017-04-29T11:28:59.667

1

Using $("#noteNumberInput").val() will clear the textarea

EDIT

The problem is the keydown handler. In this case the function will be triggered followed by the display of alert & then the text area will be populated. But on using keyup the function will be triggered on release of the key.So by that time the textarea will be populated with value.

Change the keydown to keyup

var noteNumberInput = document.getElementById("noteNumberInput");
noteNumberInput.addEventListener("keyup", validate);

DEMO

edited Apr 29 '17 at 11:28

answered Apr 29 '17 at 11:21

brk

43,022
4
37
61

Unfortunatley doesn't work, the character still displays after the alert message is removed. – Xander Apr 29 '17 at 11:22
@EthanBristow how are you calling validate function? – brk Apr 29 '17 at 11:24

score 1 · Accepted Answer · answered Apr 29 '17 at 11:28

1

Change noteNumberInput.addEventListener("keydown", validate); to use keyup

answered Apr 29 '17 at 11:28

webbm

553
6
15

score 0 · Answer 4 · answered Apr 29 '17 at 11:33

0

Your only asking for the validate() function to actually execute when you've pressed the next key.

answered Apr 29 '17 at 11:33

Lucas Barbosa

1
1

score 0 · Answer 5 · answered Apr 29 '17 at 11:38

I think that´s not the best idea to trigger key events, because cut and paste and drag and drop can also change the input element.

try this:

Element.addEventListener('input', function(){
    this.value=this.value.replace(/[^0-9,.]/g, '');
});

this must be adapted to textarea...

How to clear a textarea value in jQuery?

EDIT:

5 Answers5