Develop Reference

How to clear a textarea value in jQuery?

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

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.

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

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

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

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 disable all keys in key board except tab key

How to disable all keys in key board except tab key for select box in html. Can any one provide the code for this one?
Below is i tried below code but it was not working

I hope this will help you..put textbox and selectbox in the page..
document.getElementById("li1").onkeydown = function (e) {
e.preventDefault();
}
Demo

I don't know what you want to do exactly, but if you use jQuery this is fairly simple:
$('html, body').keydown(function(event){
if(event.keyCode !== 9) { // 9 = tab
event.preventDefault();
}
});
If you want to disable keys only when a given element has focus, you can change the selector inside $().

HTML input tag, cannot type

I have been struggling with this for a couple of days. I am pretty sure it's something simple, but I just can't see it.
On this page there is a form that users can use to send a message. Click on the grey Contact icon to see it.
The form used to work fine, but now I cannot type into any fields. Selecting an autocomplete value works though.
I have tried disabling some Javascript, adding a z-index value to the fields, but to no avail.
Can someone please take a look and tell me what might be the problem?
Thanks in advance.

You are too eager to restrict the user..
This code is the problem:
$(document).keydown(function(e){
if (e.keyCode == 39) {
//(...)
toggleArrows();
}
return false;
});
If the button IS NOT keyCode 39, you deny the button functionality.
Just remove the return false and your problem will be gone.
Edit: I just noticed you have 2 keydown events, one checking for keycode 37 and one for 39. Don't do that! You should do it this way:
$(document).keydown(function(e){
if (e.keyCode == 39) {
//(...)
}
else if (e.keyCode == 37) {
//(...)
}
});
And, again, get rid of the return false;.
JSFiddle to show the result: http://jsfiddle.net/xr2stb0k/
First checkbox is restricted with return false (except for the letter "a"), second one isn't.

jQuery UI datepicker reset date

I have a datepicker that's on an input field, default date when I first open it is today's date, which is what I want.
However, when I select a date and I clear the input field, the datepicker still has the selected date on it, which I don't want
Does anyone have an idea why this happens and how I can prevent this behavior?

The proper way to reset the date of a Datepicker widget is like this:
$.datepicker._clearDate('#input_field_goes_here');
Or like this:
$('#input_field_goes_here').datepicker('setDate', null);
Whichever works best for you.

See http://codepen.io/alexgill/pen/yOQrwV
$(SELECTOR).datepicker('setDate', null);

Clear button in calendar.
$("#txtCalendar").datepicker({
showButtonPanel: true,
closeText: 'Clear',
onClose: function (dateText, obj) {
if ($(window.event.srcElement).hasClass('ui-datepicker-close'))
$("#txtCalendar").val('');
}
});

Just add this code
}).keyup(function(e) {
if(e.keyCode == 8 || e.keyCode == 46) {
$.datepicker._clearDate(this);
}
});
You can use backspace to clear field even if it has in read only mode. Source

To really reset everything, including the selected year in the date selector popup, I had to do the following:
$(SELECTOR).datepicker('setDate', new Date());
$(SELECTOR).datepicker('setDate', null);
Just doing the last line results in the previously selected year to show in the date selector

Jquery validation plugin (bassistance.de) and validation on tab for empty fields

I see a duplicate question about this but with no accepted answers:
jQuery Validation PlugIn : Forcing Validation on empty Field
There is a comment on the linked post that validation on tabbing won't work without editing the plugin. Does anybody have any solutions or workaround to get the validation plugin to fire on tabbing through empty fields?
I've tried the event option, passing in 'blur', 'keydown','keyup', etc.
Has anyone come up with a patch or workaround?
Thanks!

Ah, I see now, you just need to call valid() on an element and all children inputs will be validated.
I decided to add validation to the blur event and tab
$("input").blur(function() {
$(this).valid();
})
$("input").keydown(function(e) {
var code = (e.keyCode ? e.keyCode : e.which);
if(code == 9) { //Enter keycode
$(this).valid();
}
})