We Keep Coding

How to pass "this" on an enter key event?

I think this is a syntax question, but I can't seem to find a question that answers what I'm looking for. There's lots that are... close. Might be something with binding, or "apply", but I can't figure out how to use those in this context.
I have a function, that when fired, turns a span into an input so it can be edited. Then, when the focus is off (blur), the new text is saved. So far that works exactly as I wanted. I thought it would be nice if enter key would do the same thing... but I can't figure out how to make the event work.
function span_into_textarea() {
var old_text = $(this).text();
var editableText = $("<input type='text' />");
editableText.val(old_text);
$(this).replaceWith(editableText);
editableText.focus();
editableText.blur(textarea_into_span);
editableText.keypress(function (e) {
if (e.which == 13) {textarea_into_span()}
}); // THIS DOESNT PASS ANYTHING TO "THIS"
editableText.keypress(textarea_into_span); //THIS WORKS BUT I CAN'T KNOW WHICH KEY WAS PRESSED
}
function textarea_into_span() {
var new_text = $(this).val();
}
Thanks for any help!

You can use call to pass the this reference:
editableText.keypress(function (e) {
if (e.which == 13) {textarea_into_span.call(this)} //will refer to editableText
});

You may bind: editableText.keypress( textarea_into_span.bind(this) ) (event is passed as an argument).
You may replace textarea_into_span with an arrow function (they don't bind this so it is looked up in parent context):
editableText.keypress( (e) => {
if (e.which == 13) {
var new_text = $(this).val();
}
})
As suggested by #Mouser you may use call or apply:
editableText.keypress( function(e) {
if (e.which == 13) {
textarea_into_span.call(this);
// or textarea_into_span.apply(this)
}
})

Try this way, you were losing the scope:
function span_into_textarea() {
var modify = this;
var old_text = $(this).text();
var editableText = $("<input type='text' />");
editableText.val(old_text);
$(this).replaceWith(editableText);
editableText.focus();
editableText.blur(textarea_into_span(modify));
editableText.keypress(function (e) {
if (e.which == 13) {textarea_into_span(modify)}
});
}
function textarea_into_span(modify) {
var new_text = $(modify).val();
}

editableText.keypress(function(e) {
var key = e.which;
if (key == 13) // enter key ascii code
{
textarea_into_span.call(this) //will refer to editableText
}
});

Form Text Field to ONLY accept numbers and whitespace

I have a basic enquiry form on my website and I want one of the fields to ONLY accept numbers and keyboard spaces (whitespace).
Currently, the phone number field only accepts numbers using:
if(isNaN(form.phone.value))
{
alert('Due to SPAM this field will only accept numbers');
form.phone.focus();
return false;
}
When I test the form and use a keyboard space the error message is displayed. I need this field to accept numbers and whitespace. I assume people will use spaces when entering their full telephone number including country/area codes.

You could do it like this
'use strict';
function addEvent(elem, event, fn) {
if (typeof elem === 'string') {
elem = document.getElementById(elem);
}
function listenHandler(e) {
var ret = fn.apply(null, arguments);
if (ret === false) {
e.stopPropagation();
e.preventDefault();
}
return ret;
}
function attachHandler() {
window.event.target = window.event.srcElement;
var ret = fn.call(elem, window.event);
if (ret === false) {
window.event.returnValue = false;
window.event.cancelBubble = true;
}
return ret;
}
if (elem.addEventListener) {
elem.addEventListener(event, listenHandler, false);
} else {
elem.attachEvent('on' + event, attachHandler);
}
}
var keys = ' 0123456789';
function verify(e) {
var key = String.fromCharCode(e.keyCode || e.charCode);
return keys.indexOf(key) !== -1;
}
addEvent('test', 'keypress', verify);
<input id="test" type="text" />
Update: As everything supports EventTarget.addEventListener these days, you don't need all the additional boilerplate. And the above could be written like.
'use strict';
const element = document.getElementById('test');
const keys = ' 0123456789';
element.addEventListener('keypress', (e) => {
if (keys.includes(e.key) === false) {
e.stopPropagation();
e.preventDefault();
}
}, false);
<input id="test" type="text" />
Info:
keypress
KeyboardEvent
Event.stopPropagation
Event.preventDefault

Use html5 input type="tel" attribute (http://www.w3schools.com/tags/tag_input.asp).

JS: How to detect whether cursor is in textfield

I want to use some letters ( keys ) as shortcut for some actions in javascript. I want to check whether the cursor is focused on any textfield, form input, etc. so that the shortcut action will be canceled when user is typing something in a form or textfield.
For example, i want an alert() to be executed when user presses 'A'. But if the user is typing some text in a textarea like 'A website' then he will be pressing 'A', this time alert() should not be executed.

$(document).keydown( function( e ) {
if( e.target.nodeName == "INPUT" || e.target.nodeName == "TEXTAREA" ) return;
if( e.target.isContentEditable ) return;
// Do stuff
}

window.onkeydown = function(e){
if ( e.target.nodeName == 'INPUT' ) return;
handle_shortcut();
};

jQuery
$(window).bind('keydown',function(e){
if(e.target.nodeName.toLowerCase() === 'input'){
return;
}
alert('a');
});
or pure js
window.onkeydown = function(e){
if(e.target.nodeName.toLowerCase() === 'input'){
return;
}
alert('a');
};
What you can do in addition to this is define an array of non-alert element types, so input, textarea etc and then check none of those elements are currently the target.
Demo: http://jsfiddle.net/7F3JH/

You can bind and unbind the shortcut events depending on which element currently has focus on your page.
JavaScript
window.onload = initWindow();
function initWindow () {
attachShortcutHandler();
var inputs = document.getElementsByTagName('input');
for (var i = 0, max = inputs.length; i < max; i++) {
inputs[i].onfocus = removeShortcutHandler;
intputs[i].onblur = attachShortcutHandler;
}
}
function removeShortcutHandler () {
window.onkeypress = null;
}
function attachShortcutHandler() {
window.onkeypress = function () {
//your code here
}
}
jQuery
$(function () {
initShortcutHandler();
$('input, [any other element you want]')
.on('focus', function () {
$('body').off('keypress');
})
.on('blur', function () {
initShortcutHandler();
});
});
function initShortcutHandler() {
$('body').on('keypress', function () {
//do your stuff
});
}

jQuery mouseover()
$('element').mouseover(function() {
alert('over');
});

you need to make a flag as global. and set it false when any textbox has focus.
var flag = true;
$('input:type="text").focus(function(txt) {
flag= false; });
if(flag) //shortcut keys works...

Better use the focusOut method defined in JQuery. As per my understanding you can do something like this
$("input").focusout(function() {
if($(this).val() == "A"{
alert("your message");
return false;
}else{
//do other processing here.
}
});
Hope this helps :)

Is there a better way to code this in JavaScript and/or jQuery?

Here it is:
//Disable KeyboardNavigation
document.getElementById("author").onfocus = function() {
document.onkeyup = null;
};
document.getElementById("email").onfocus = function() {
document.onkeyup = null;
};
document.getElementById("url").onfocus = function() {
document.onkeyup = null;
};
document.getElementById("comment").onfocus = function() {
document.onkeyup = null;
};
//Enable KeyboardNavigation
document.getElementById("author").onblur = function() {
document.onkeyup = KeyCheck;
};
document.getElementById("email").onblur = function() {
document.onkeyup = KeyCheck;
};
document.getElementById("url").onblur = function() {
document.onkeyup = KeyCheck;
};
document.getElementById("comment").onblur = function() {
document.onkeyup = KeyCheck;
};
I believe it's definitely possible to write a better code with a loop but I really don't know how to make it work. I tried the following:
var formfields= ["author", "email", "url", "comment"];
for (i=1; i<=3; i++){
//Don't really know what to put in here.
}
Thank you in advance for your help!
EDIT : Whole code is below. You should know that I got some help to get to this result:
document.onkeyup = KeyCheck;
var pages = [
"http://",
"http://",
"http://",
"http://",
"http://"];
function leftarrowpressed() {
location.href = pages[ Math.max(0, 0 - 1) ];
//The second '0' here changes from 0 to 4, according to the page.
}
function rightarrowpressed() {
location.href = pages[ Math.min(pages.length - 1, 0 + 1) ];
//The second '0' here changes from 0 to 4, according to the page.
}
function KeyCheck(e)
{
var KeyID = (window.event) ? event.keyCode : e.keyCode;
switch(KeyID)
{
// left arrow key
case 37:
leftarrowpressed();
break;
// right arrow key
case 39:
rightarrowpressed();
break;
}
}
Hope this can help a little more. By the way, thank you everyone. I really don't know which solution to choose.

It looks like what you are doing is trying to prevent keystrokes in an input element from affecting navigation. What you could do instead is check event.target in KeyCheck and only perform the action if it was not triggered by an input element.
function KeyCheck(e) {
var target = e ? e.target : event.srcElement, //standards vs IE
tagname = target.tagName.toLowerCase();
if( tagname !== "input" && tagname !== "textarea" && tagname !== "select") {
//Not from an input, NAVIGATE!
}
}

If using jQuery then you can go a more straight-forward way: inside KeyCheck, check whether any of the elements is focused, and don't do anything in that case. You won't need any of the above.
function KeyCheck(e) {
if($("#author, #email, #url, #comment").is(":focus")) {
return; // ignore if any of these elements has focus
}
// ...
}
Make sure to bind KeyCheck using jQuery too:
$("body").on("keyup", KeyCheck);

var formfields= ["author", "email", "url", "comment"];
for (i=0; i<=3; i++){
var field = document.getElementById(formFields[i]);
field.onfocus = function() {
document.onkeyup = null;
};
field.onblur = function() {
document.onkeyup = KeyCheck;
};
}
or more proper way would be to use something like this
jQuery.each("author email url comment".split(" "), function(i, name) {
$('#' + name).focus(function() {
// do whatever you want to do
}).blur(function() {
// do whatever you wnat to do
));
});

Neat and readable:
var formfields = ["author", "email", "url", "comment"],
i, elem,
blur = function() { document.onkeyup = KeyCheck; },
focus = function() { document.onkeyup = null; };
for (i=0; i<=3; i++) {
elem = document.getElementById(formFields[i]);
elem.onblur = blur;
elem.onfocus = focus;
}

look for the nearest common parent for these elements and add a handler to it. we can use the powers of delegation using the .on() as well as method chaining to bind a hander only to the parent (in this case, 2 handlers for all, not 8 where 2 per element) to take effect on all 4 elements.
var selectors = '#author, #email, #url, #comment';
$('nearest_parent_element').on('focus', selectors, function() {
document.onkeyup = null;
}).on('blur', selectors, function() {
document.onkeyup = KeyCheck;
});​

jQuery way:
$("#author, #email, #url, #comment").on({
focus: function() {
$(document).on('keyup', null);
},
blur: function() {
$(document).on('keyup', KeyCheck);
}
});

It all depends on how good you are at JavaScript. I would recommend for you to use event delegation: http://jsfiddle.net/teresko/PkCuZ/3/
It might look a bit complicated , but the add_listener() function would be shared throughout the whole code , so the payload actually looks like this:
var handlers = {
keyout: function(e){
var event = e || window.event,
target = event.target || event.srcElement;
console.log( 'leaving ' + target.name );
},
keyin: function(e){
var event = e || window.event,
target = event.target || event.srcElement;
console.log( 'entering ' + target.name );
}
},
container = document.getElementById('container');
add_listener( container, 'blur' , handlers.keyout );
add_listener( container, 'focus' , handlers.keyin );
This would work with any number of form elements.
As for the add_listener() function , it contains a small fix for blur/focus on IE, and a per-application choice of which method of attaching events to use. It's kinda an universal function which you can just drop in, when you need a common interface for attaching listeners:
var add_listener = (function () {
var fix = {
'focus': 'focusin',
'blur': 'focusout'
};
if ( window.addEventListener ) {
return function ( element, type, callback ) {
element.addEventListener(type, callback, typeof(fix[type]) !== undefined );
};
}else{
return function ( element, type, callback ) {
type = fix[type] || type;
element.attachEvent('on' + type, callback);
};
}
})();

Problem with KeyPress Javascript function

I call a javascript function from a textbox by using OnKeyPress="clickSearchButton()"
Here is my function:
function clickSearchButton()
{
var code = e.keyCode || e.which;
var btnSearch = document.getElementById("TopSubBanner1_SearchSite1_btnSearchSite");
if(code == 13);
{
btnSearch.click();
return false;
}
}
My problem is that this function fires when the user hits the enter button in any textbox, not just the one that calls the function. What am I missing?
EDIT: Still not working correctly. So I'll throw my HTML out there if that helps.
<input name="TopSubBanner1:SearchSite1:txtSearch" type="text" id="TopSubBanner1_SearchSite1_txtSearch" OnKeyPress="clickSearchButton(this)" /><input type="submit" name="TopSubBanner1:SearchSite1:btnSearchSite" value="Search" id="TopSubBanner1_SearchSite1_btnSearchSite" />
Also, this is an ASP.NET page if that makes a difference.

The event is by default passed as an argument to your function, but your not capturing it as a parameter. If you capture it, the above should work correctly.
function clickSearchButton(e)
{
e = e || window.event //for IE compliane (thanks J-P)
//etc
or
function clickSearchButton()
{
var e = arguments[0];
e = e || window.event;
Also you have an extra semicolon as Kevin pointed out.

function clickSearchButton(e)
{
var code;
if(window.event)
code = e.keyCode;
else
code = e.which;
var btnSearch = document.getElementById("TopSubBanner1_SearchSite1_btnSearchSite");
if(code == 13)
{
btnSearch.click();
return false;
}
}
and your calling method should be:
onkeypress="clickSearchButton(event)"