Develop Reference

How to determine if user is beginning new word in JS?

How would you, with JS or jQuery, determine if what the user is typing is a new word?
What I want to do:
I am writing a documentation tool with autocompletion for different types. If you type f.e. # it will populate Java Classes in a box, # would populate test classes, etc. Now I don't want to populate these values, if the user is writing something like an email like yourname#domain.com. So I need the values to populate only when it's the beginning of the word.
I am aware of keydown, keyup events, etc. I just don't know how to check for this certain kind of event properly.
One way would be to save every typed letter in a variable and then check if the previous "letter" was a space and if it was, we know it's a new word. Is this the best/most efficient way to do this?

One way is to check what's before the # in the input box, using selectionStart:
onload = function() {
var io = document.getElementById("io");
io.onkeypress = function(e) {
if(e.charCode == 64 && (
io.selectionStart == 0 || io.value[io.selectionStart-1].match(/\s/)))
document.getElementById("ac").innerHTML = "autocomplete!";
else
document.getElementById("ac").innerHTML = "";
}
}
<input id="io">
<div id="ac"></div>

Try this JSFiddle. I'm performing the check like so:
var text = $("#test").val();
if (text.length == 0 || text.charAt(text.length - 1).match(/[\s\b]/)) {
$("#result").html("new word");
} else {
$("#result").html("no new word");
}
You can easily adapt the .match() pattern if you like to include other characters as "whitespaces" (e.g. curly braces) for your Editor.

Assuming text is entered in a text input with id="txtchangedetection":
$("#txtchangedetection").change(function(){
console.log("The text has been changed.");
});
/*This is `JQuery`*/
I've understood you want to detect word changes in the input. Please precise if I'm wrong. What do you mean by 'new word' ?

One solution will be like this :
1- declare a variable "newWord = true"
2- with keydown event check if the key pressed is a space
if YES : newWord = true
if NO : newWord = false
var newWord=true;
$("#textarea").keydown(function(e){
if(e.keyCode == 32){
newWord=true;
}else{
newWord=false;
switch(e.keyCode){
//work to do
}
}
})

use keypress on your input field... populate the array inside the if with your special chars
if(prev == 13 || prev == 32 || $('#doc').val().length==0 || prev==null){
listen = true;
}else{
listen = false;
}
prev = e.which;
if(listen && $.inArray(String.fromCharCode(e.which),["#","#"]) != -1){
e.preventDefault();
alert("populate box here");
listen = false;
prev = null;
}
the fiddle https://jsfiddle.net/6okfqub4/

Javascript Regex to limit Text Field to only Numbers (Must allow non-printable keys)

I have received PHP/JS code from previous developer and I need to add number validation to a Mobile Number field. I already have the HTML validation in place but I need to add that if someone presses an invalid key, that it doesn't get displayed only to highlight the field later in red because it contains invalid input.
I've seen many regex's used and tried them but they had an either/or effect from what I need which is: If a letter or special character is entered, do not accept and do not display, all other input (digits, keys) is accepted (I need the invalid character not be displayed at all, not displayed and then erased). The regex that is working the most now is this:
function filterNonDigits(evt)
{
var event = evt || window.event;
var keyentered = event.keyCode || event.which;
keyentered = String.fromCharCode(keyentered);
//var regex1 = /[0-9]|\./;
var regex2 = /^[a-zA-Z.,;:|\\\/~!##$%^&*_-{}\[\]()`"'<>?\s]+$/;
if( regex2.test(keyentered) ) {
event.returnValue = false;
if(event.preventDefault) event.preventDefault();
}
When I used the commented regex1 (with the IF condition reversed), naturally it limited input to only digits thus preventing all keys such as Delete, BackSpace, etc. When using regex2, I still can't press Delete or the digits from the numpad.
So my question is, can the above code be modified to accept only digits but also allow keys? Another important point is that I need a method that doesn't use keycodes (8, 24 etc) for those key, in order to make sure all keyboard types can be used.
New Update:
So my solution is as follows: If the "oninput" property exists, I use the solution provided by Ehtesham and if it doesn't, the backup uses the solution provided by Rohan Kumar. So it's something like this:
if (obj.hasOwnProperty('oninput') || ('oninput' in obj))
{
$('#mobileno').on('input', function (event) {
this.value = this.value.replace(/[^0-9]/g, '');
});
}
else
{
$('#mobileno').on('keypress',function(e){
var deleteCode = 8; var backspaceCode = 46;
var key = e.which;
if ((key>=48 && key<=57) || key === deleteCode || key === backspaceCode || (key>=37 && key<=40) || key===0)
{
character = String.fromCharCode(key);
if( character != '.' && character != '%' && character != '&' && character != '(' && character != '\'' )
{
return true;
}
else { return false; }
}
else { return false; }
});
}
Thanks.

The best method here is to use input event which handles all your concerns. It is supported in all modern browsers. With jQuery you can do like following. Handles all cases pasting the value with mouse/keyboard backspace etc.
$('.numeric').on('input', function (event) {
this.value = this.value.replace(/[^0-9]/g, '');
});
See it here
You can check if input event is supported by checking if the input has this property if not you can use onkeyup for older browsers.
if (inputElement.hasOwnProperty('oninput')) {
// bind input
} else {
// bind onkeyup
}

A nice solution is described in a previous post:
jQuery('.numbersOnly').keyup(function () {
this.value = this.value.replace(/[^0-9\.]/g,'');
});

Try it like,
CSS
.error{border:1px solid #F00;}
SCRIPT
$('#key').on('keydown',function(e){
var deleteKeyCode = 8;
var backspaceKeyCode = 46;
if ((e.which>=48 && e.which<=57) ||
(e.which>=96 && e.which<=105) || // for num pad numeric keys
e.which === deleteKeyCode || // for delete key,
e.which === backspaceKeyCode) // for backspace
// you can add code for left,right arrow keys
{
$(this).removeClass('error');
return true;
}
else
{
$(this).addClass('error');
return false;
}
});
Fiddle: http://jsfiddle.net/PueS2/

Instead of checking for the event keyCode, why don't you just check for changes inside the actual input and then filter out non-numbers?
This example uses keyup so that it can read what was actually entered, which means the character is briefly displayed and then removed, but hopefully you get my gist. It might even give the user feedback that the character is not allowed. Either way I think this is the easiest setup, let me know if you need more help fleshing this out.
function filterNonDigits(evt)
{
var event = evt || window.event;
var val = event.target.value;
var filtered = val.replace(/[^0-9]/g, '');
if(filtered !== val) {
event.target.value = filtered;
event.target.className += " error";
}
}
http://jsfiddle.net/mEvSV/1/
(jquery used solely to easily bind the keyup function, you won't need it for your actual script)

/\d/ is equivalent to the above described /[0-9]/. src: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions#special-digit

This is a bit more concise...
this.value = this.value.replace(/\D/gm, '');

document.onkeydown Keyboard Input is only capitalized

I'm trying to build a communal wall, that appears the same for all those who access the web page, and syncs between users. I'm struggling to capture keyboard input correctly to apply to the canvas. My function is based on document.onkeydown, and can be seen in the 'script.js' referenced in the said web page. It can be seen working when you double click a word and the write.
Unfortunately this seems to be failing to capture anything but capital letters, and I'm looking for an alternate way to go about this. I've looked into the 'textInput' event, described in this page, however it seems to be only supported by WebKit browsers, and I want to build something which works generically. Can someone suggest an alternate way to go about capturing keyboard input for use in canvas? Or perhaps I'm doing something silly?
Code described is here:
document.onkeydown = keyHandler;
function keyHandler(e)
{
var pressedKey;
if (document.all) { e = window.event;
pressedKey = e.keyCode; }
if (e.which) {
pressedKey = e.which;
}
if (pressedKey == 8) {
e.cancelBubble = true; // cancel goto history[-1] in chrome
e.returnValue = false;
}
if (pressedKey == 27)
{
// escape key was pressed
keyCaptureEdit = null;
}
if (pressedKey != null && keyCaptureEdit != null)
{
keyCaptureEdit.callback(pressedKey);
}
}
... Later on in code describing each text object ...
keyCaptureEdit.callback = function (keyCode) {
var keyCaptured = String.fromCharCode(keyCode);
if (keyCaptured == "\b" ) { //backspace character
t.attrs.timestamp = t.attrs.timestamp + 1;
t.setText(t.getText().slice(0, -1));
}
else if (keyCode == 32 || keyCode >= 48 && keyCode <= 57 || keyCode >= 65 && keyCode <= 90)
{
t.attrs.timestamp = t.attrs.timestamp + 1;
t.setText(t.getText() + keyCaptured);
}
layer.draw();
}

Well one trivial way to change your code would be to keep track of the shift key:
...
{
keyCaptureEdit.callback(pressedKey, e.shiftKey); // <-- keep track of shift key
}
}
...
keyCaptureEdit.callback = function (keyCode, shift) {
var keyCaptured = String.fromCharCode(keyCode);
// shift key not pressed? Then it's lowercase
if (shift === false) keyCaptured = keyCaptured.toLowerCase()
But that doesn't account for CapsLock.
In jQuery its really simple because the right key code is done for you:
$(document).keypress(function(event) {
var keyCaptured = String.fromCharCode(event.keyCode);
console.log(keyCaptured);
});
In that example the console will correctly log P or p depending on what would be typed.

Determine if key pressed is in provided array

I have code similar to this:
$("#some-input").keyup(function (event) {
var availableKeys = [".", ",", ";"];
var key = String.fromCharCode(event.which);
if (availableKeys.indexOf(key) != -1) {
alert("Derp");
}
});
However it does not work as I expected. The event.which/fromCharCode combination works like this properly on digits or letters (capital ones) and this is the correct behaviour since (I presume) event keycodes are different than charset entries.
Is there a workaround other than directly specifying keycodes for comparison (keeping the array of characters is a priority)?

Try changing your array to contain the keycodes of the keys you wish to check for:
$("#some-input").keyup(function(event) {
var availableKeys = [190, 188, 59]; // ".", ",", ";"
if (availableKeys.indexOf(event.which) != -1) {
alert("Derp");
}
});
Example fiddle here
Here's a full list of keycodes
Edit
After a little investigation it appears your method should work, but the implementation of String.fromCharCode is flawed - at least for the symbol keys. While pressing . returns the correct keyCode of 190, when you run that through fromCharCode you get the string ¾. Other keys such as [ and # show similar behaviour. I assume this is due to internationalisation, maybe someone else could confirm.

You could use keypress instead. Like
$("#some-input").bind('keypress', function(e) {
var availableKeys = [".", ",", ";"];
if(availableKeys.indexOf( String.fromCharCode( e.which ) ) > -1 ) {
alert('Derp');
}
});

Looks to me as though you should try using charCodeAt to convert your keys to keycodes at comparison time. eg:
alert (".".charCodeAt(0)); // alerts 46
https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String/charCodeAt

This very likely is an issue related to the way you are getting the key/char code. Try getting the char/key code like:
var code = (event.charCode != 0) ? event.charCode : (event.keyCode != 0 ? event.keyCode : event.which);
var key = String.fromCharCode(code);
Can't find any issues in any other part of your code.

This is not working because you are using ' as one of the key and also as char separator in the array so its confusing the program otherwise its working for . and ;.
["." , " , " , ";"] . It consider 4 different elements.
use belwo code:
$("#some-input").keypress(function (event) {
var availableKeys = ",.;";
var key = String.fromCharCode(event.which);
if (availableKeys.indexOf(key) != -1) {
alert("Derp");
}
});
fiddle : http://jsfiddle.net/AVcrw/1/

You could use underscore.js:
$("#some-input").bind('keypress', function(event) {
var aKeys = [13, 32];
if ( _.contains(aKeys, event.which) ) {
console.log("char :" + event.which);
}
});

How can I limit a textbox to have less than 3 commas in it?

For example we have a textbox which is for tags for a blog. What I want is I want to limit number of tags to be limited.
For instance, "web hosting,php,windows8".
When the user tries to type another one to textbox which he will start with comma, the textbox won't let him write it.

In your keypress handler, capture the event object and do;
if (event.which == 44 && $(this).val().split(",").length > 2) {
event.preventDefault();
}
See it in action here; http://jsfiddle.net/5L7mU/

We can split this problem into 3 smaller problems.
First, we need a way to stop the user from writing stuff into the textbox. When you hook a callback on keypress, the event passed has a method called preventDefault which should do the job. So to block all input:
$("input").keypress(function(event) {
event.preventDefault();
});
Now, to check how many comas there already are in the textbox, we can use regex. The match function will return null instead of an empty array if there are no matches so we gotta check for that.
$("input").keypress(function(event) {
var matches = $(this).val().match(/,/g);
var count = 0;
if (matches)
count = matches.length;
console.log(count);
});
Finally, we need to be able to check if the user typed in a coma. The event objectwill have a property called which that contains the key code of the character entered. With a little bit of exploring, you can find out that the key code for coma is 44.
$("input").keypress(function(event) {
if (event.which == 44)
event.preventDefault();
});
So if we put it all together:
$("input").keypress(function(event) {
var matches = $(this).val().match(/,/g);
var count = 0;
if (matches)
count = matches.length;
if (count >= 2 && event.which == 44)
event.preventDefault();
});
http://jsfiddle.net/4wn5W/

$(document).ready(function(){
$('#textbox').keypress(function(e){
var text = $(this).val();
if(text.split(',').length>3){
return false;
}else if(e.which==44&&text.split(',').length>2){
return false
}
});
});
Fiddle:
http://jsfiddle.net/L4X4C/