Develop Reference

disable Javascript auto suggest function for some word

I has only one question about JavaScript. can we disable auto suggest function for only certain word? I mean, if User typing some word such as "plate" then auto suggest function will not return any value but if they typing other than that, the function will work as it mean to.

You should have an event listener added to your textbox like following:
$('#mytextbox').keyup(function(e){
if ($(this).val().match(/^plate$/))
{
return;
}
// proceed your autocomplete here
});

Check for special characters

I want to prevent users inputing special characters ()&<>[]{}% in the many input and text areas of our website. Which is the best way ? Users use IE8, Firefox and Chrome. The name and id in the input and textarea is dynamic. I have no control over it.
So basically, I just want a function and use the onclick event to call it. I thought :input selector would do the work. Thanks.
Please take a look at JSFIDDLE
function spCheck ()
{var str = $('textarea').val();
if(/^[a-zA-Z0-9- ]*$/.test(str) == false) {
alert('You have entered illegal characterss. Please remove them and try again.');
}}

Add class notSpecilChar to elements you want to check and on blur alert or keyup event.
$('.notSpecilChar').blur(function () {
if (/^[a-zA-Z0-9- ]*$/.test(this.value) === false) {
alert('You have entered illegal characterss. Please remove them and try again.');
}
});

How can I tell when a character has been typed in an input field?

Let's say I have an input field with an id of code ( #code ).
How can I tell when a new character has been typed in it with javascript or jQuery ?
This is when the text is manually being entered or is done by javascript / jQuery.

Use Change function to track any changes in the textbox input. Change event will be triggered only if you focus out of the text box
$('#idoftextbox').change(function(){
//do something
});
If you want to detect as the user enters something then you need to use KeyPress
$('#idoftextbox').keypress(function(event) {
if ( event.which == 13 ) { //This will give you the key code
event.preventDefault();
}
});

Edit
In modern browsers only, you can use the "input" event. The change event will probably help you in most cases for all browsers and jQuery and JS examples are defined below.
As mentioned the change event will only fire on an input losing focus so you'd have to use a combination of techniques to cover all bases, including checking the field value at given intervals. A thorough explanation that covers all scenarios can be found on SO here:
Detecting input change in jQuery?
jQuery:
$('#code').on('change', function(e){
//do something
});
Javascript
document.getElementById('code').addEventListener('change', function(e){
//do something
});

This will trigger on every keypress.
Using Javascript:
document.getElementById('id').addEventListener('input',function(e){
console.log("Print Hello World");
//do something else
});

Trigger an event when textbox contains specific keycode

I am currently working on a jQuery functionality to check a textbox for certain character values and then trigger some event depending on what character it is.
I figured the easiest way to process this would be by checking on keycodes. I have tried some different things to make the event trigger, but nothing seems to happen.
One of the things I want to check is if a textbox contains an # character (which is not allowed in the specific textbox, and it's keycode is 64 according to this site - expandinghead)
Some of the code I've attempted to use:
$("#NoEmailAllowed").live({
"keyup": function(e) {
if((e.keyCode == 64) || (e.which == 64))
{
$(this).addClass("redBg");
}
}
});
$("#NoEmailAllowed:contains('#')").live({
"keyup": function() {
$(this).addClass("redBg");
}
});
$("#NoEmailAllowed").keyup(function(){
if(this.val().contains("#"))
{
$(this).addClass("redBg");
}
});
I've tried a lot of others too, but they were quiet similar to the ones above.
So just to make everything clear about what I'm trying to achieve is:
When a user enters something in this textbox the jquery shall check for any # characters on-the-fly, and if it finds any # characters, trigger an event - for instance an alert or add a css class.

The keyup() event operates with scancodes, you're better off using keypress() to catch actual text entry (as mentioned in the jQuery documentation):
$(function(){
$('#NoEmailAllowed').keypress(function(e) {
if(e.which == 64)
{
$(this).addClass("redBg");
}
});
});
jQuery normalizes e.which, there is no need to check anything else.

Jquery : how to trigger an event when the user clear a textbox

i have a function that currently working on .keypress event when the user right something in the textbox it do some code, but i want the same event to be triggered also when the user clear the textbox .change doesn't help since it fires after the user change the focus to something else
Thanks

The keyup event will detect if the user has cleared the box as well (i.e. backspace raises the event but backspace does not raise the keypress event in IE)
$("#inputname").keyup(function() {
if (!this.value) {
alert('The box is empty');
}
});
jsFiddle
As Josh says, this gets fired for every character code that is pressed in the input. This is mostly just showing that you need to use the keyup event to trigger backspace, rather than the keypress event you are currently using.

The solution by Jonathon Bolster does not cover all cases. I adapted it to also cover modifications by cutting and pasting:
$("#inputname").on('change keyup copy paste cut', function() {
//!this.value ...
});
see http://jsfiddle.net/gonfidentschal/XxLq2/
Unfortunately it's not possible to catch the cases where the field's value is set using javascript. If you set the value yourself it's not an issue because you know when you do it... but when you're using a library such as AngularJS that updates the view when the state changes then it can be a bit more work. Or you have to use a timer to check the value.
Also see the answer for Detecting input change in jQuery? which suggests the 'input' event understood by modern browsers. So just:
$("#inputname").on('input', function() {
//!this.value ...
});

Another way that does this in a concise manner is listening for "input" event on textarea/input-type:text fields
/**
* Listens on textarea input.
* Considers: undo, cut, paste, backspc, keyboard input, etc
*/
$("#myContainer").on("input", "textarea", function() {
if (!this.value) {
}
});

You can check the value of the input field inside the on input' function() and combine it with an if/else statement and it will work very well as in the code below :
$( "#myinputid" ).on('input', function() {
if($(this).val() != "") {
//Do action here like in this example am hiding the previous table row
$(this).closest("tr").prev("tr").hide(); //hides previous row
}else{
$(this).closest("tr").prev("tr").show(); //shows previous row
}
});

Inside your .keypress or .keyup function, check to see if the value of the input is empty. For example:
$("#some-input").keyup(function(){
if($(this).val() == "") {
// input is cleared
}
});
<input type="text" id="some-input" />