JS: How to detect whether cursor is in textfield - javascript

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

Related

Changing return key into tab function

I have a client who wants the Enter/Return key to perform the same function as the tab key on form fields.
Here's my code so far. It won't work. Anyone know why?
<script>
$('input, select').live('keydown', function(e) {
if (e.keyCode === 13) {
if (e.shiftKey) {
var focusable = form.find('input,a,select,button,textarea').filter(':visible');
focusable.eq(focusable.index(this)-1).focus();
}
else {
var focusable = form.find('input,a,select,button,textarea').filter(':visible');
focusable.eq(focusable.index(this)+1).focus();
return true;
}
}
});
</script>
You'll want to prevent the default behavior of the enter key with preventDefault();
You put form.find in there, but I don't see form set anywhere. Maybe try $('form')?
I've set up a basic js fiddle for you to check out. Is this the functionality you were going for?
$('input, select').on('keydown', function (e) {
if (e.keyCode === 13) {
e.preventDefault();
if (e.shiftKey) {
var focusable = $('form').find('input,a,select,button,textarea').filter(':visible');
focusable.eq(focusable.index(this) - 1).focus();
} else {
var focusable = $('form').find('input,a,select,button,textarea').filter(':visible');
focusable.eq(focusable.index(this) + 1).focus();
return true;
}
}
});
Note that .live() is deprecated and you could just use .on()

Validate email on keyup and tab

I am success to handle user input on keyup but I have a problem to handle when the user press the tab key.
So this is my code so far:
var doneTypingInterval = 1000;
// Handle on keyup
$('#f-name').keyup(function() {
clearTimeout( typingTimer );
if($(this).val) {
typingTimer = setTimeout( doneTypingUsername, doneTypingInterval );
}
});
// Handle on tab-press
$('#f-name').on(function(e) {
var keyCode = e.keyCode || e.which;
clearTimeout( typingTimer );
if(keyCode == 9) {
e.preventDefault();
typingTimer = setTimeout( doneTypingUsername, doneTypingInterval );
}
});
// Error handler
function doneTypingUsername() {
if($('#f-name').val() == '') {
$('#f-name').siblings('.case1').fadeIn(500);
$('#f-name').siblings('.case2').hide();
valid_name_f = false;
} else {
if(!isValidUsername($('#f-name').val())) {
$('#f-name').siblings('.case1').hide();
$('#f-name').siblings('.case2').fadeIn(500);
valid_name_f = false;
} else {
$('#f-name').siblings('.case1').hide();
$('#f-name').siblings('.case2').hide();
valid_name_f = true;
set_name_timer = false;
}
}
checkForm();
}
As far as I run the code, it works fine. However, I think the way I handle the tab-press is not right. Since the keyup and tab-press will execute the same same thing, is there a better way to handle these two together?
Where your jquery says
$('#f-name').keyup(function() {
And
$('#f-name').on(function(e) {
You could be more efficient with
function functionName(e){
//do your timer and validation here
}
$(document).on('keyup', '#f-name', functionName(e));
$(document).on('blur', '#f-name', functionName(e));
Although this is not the cleanest solution, it should accomplish your email validation in both cases

Placeholder code used for IE8 causing dropdown login field to lose focus

I am using the below placeholder code for IE8, however about 70% of the time when you move your mouse around in the dropdown login field it loses focus (the whole dropdown login field vanishes); through debugging - when I remove this code the problem goes away - I have found the cause of the problem is this code:
Edit: I have found it isn't caused by any particular placeholder code, but it IS caused by some part of the process as I have tried 3 separate placeholder plugins and it happens on all 3 of them; take them away and no problems.
$(document).ready(function() {
if ( !("placeholder" in document.createElement("input")) ) {
$("input[placeholder], textarea[placeholder]").each(function() {
var val = $(this).attr("placeholder");
if ( this.value == "" ) {
this.value = val;
}
$(this).focus(function() {
if ( this.value == val ) {
this.value = "";
}
}).blur(function() {
if ( $.trim(this.value) == "" ) {
this.value = val;
}
})
});
// Clear default placeholder values on form submit
$('form').submit(function() {
$(this).find("input[placeholder], textarea[placeholder]").each(function() {
if ( this.value == $(this).attr("placeholder") ) {
this.value = "";
}
});
});
}
});
You can view an example here: http://condorstudios.com/stuff/temp/so/header-sample.php
Edit: Not sure if it will help as jsfiddle doesn't work on IE8 and I can't test if the fiddle behaves badly in IE8 too, but here is the fiddle: http://jsfiddle.net/m8arw/7/
Any way to fix this?
Have you tried switching your event to show/hide dropdown to 'mouseenter' and 'mouseleave'?
It's a lot more reliable on old IE than 'focus' and 'blur' event. Also, bind the event directly on the 'dropdown' div is more preferable than on the 'input' element.
In short, please try change this part of your code like this.
$(function() {
var dropdown = $('div.login div.dropdown')
.on('mouseenter', function() {
dropdown.css('display', 'block');
})
.on('mouseleave', function() {
dropdown.removeAttr('style');
});
});
demo: http://so.devilmaycode.it/placeholder-code-used-for-ie8-causing-dropdown-login-field-to-lose-focus
$(function(){
$('#main_header .login li').hover(function(){
$(this).find('.dropdown').show();
},function(){
$(this).find('.dropdown').hide();
});
});
NOTE: i have also cleaned up and fixed some coding horror in your js code...
I use this code to implement placeholder on all browsers (it uses Modernizr to detect it):
Demo: http://jsfiddle.net/S3zQ9/
var placeholder_OnBlur = function () {
var input = $(this);
if (input.val() == '' || input.val() == input.attr('placeholder')) {
input.addClass('placeholder');
input.val(input.attr('placeholder'));
}
};
var placeholder_OnFocus = function () {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
input.removeClass('placeholder');
}
};
var placeholder_OnSubmit = function () {
$(this).find('[placeholder]').each(function () {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
}
});
};
var placeholder_OnLoad = function () {
if (!!$(this).attr('placeholder')) {
$(this).on('focus', placeholder_OnFocus);
$(this).on('blur', placeholder_OnBlur);
$(this).parents('form').on('submit', placeholder_OnSubmit);
$(this).blur();
}
};
if (!Modernizr.input.placeholder) {
$('[placeholder]').each(placeholder_OnLoad);
}
Don't have IE8 to test it, but it should work.

How can you detect which element in a class was clicked on with Javascript?

Let's say we have a unordered list with a class:
<ul class="list-class">
<li>All</li>
<li>Breakfast</li>
<li>Lunch</li>
<li>Dinner</li>
<li>Snack</li>
</ul>
Let's say now I wanted to create some function that does different things based on which item has been clicked on:
function whichElement() {
alert("The -- Link has been clicked");
}
How can this be done without creating a separate function for each item and writing an inline onclick="" event? I'm open to using jQuery as well.
How about this if I understand correctly:
var items = document.querySelectorAll('.list-class li');
[].forEach.call(items, function(item){
var text = item.textContent.trim().toLowerCase();
item.addEventListener('click', function(){
if (text == 'all') {
//...
}
//...
});
});
You may try this
function addEvent(elem, event, fn)
{
if (elem.addEventListener)
{
elem.addEventListener(event, fn, false);
}
else
{
elem.attachEvent("on" + event, function() {
return(fn.call(elem, window.event));
});
}
}
addEvent(window, 'load', function(e){
var list = document.querySelector('.list-class');
addEvent(list, 'click', function(e){
e = e || window.event;
var el = e.target || e.srcElement;
alert(el.innerHTML);
});
});
DEMO.
Add a click handler to the ul, something like:
$('.list-class').on(
'click',
function(e){
e = e || event;
var from = e.target || e.srcElement;
if (/^a$/i.test(from.tagName)){
alert('you clicked '+from.innerHTML);
}
});
See this jsFiddle
Do a Jquery Trick as
$("#list-class li").click(function() {
alert($(this).prevAll().length+1);
});
Here is the FIDDLE
EDIT: event.target returns DOM element that initiated the event.
$('.list-class').click(function(e){
alert(e.target.nodeName);
});
Check this in JSFiddle
Not to jump on the bandwagon as this is similar to others (but not quite)...
$('.list-class>li').on('click',
function(){
alert('clicked ' + $('a',this)[0].innerHTML); //eg "clicked Lunch" etc
}
);
http://jsfiddle.net/znySy/
This simply alerts the text of the link clicked, but equally within the function you could switch on the text eg...
function(){
switch ($('a',this)[0].innerHTML) {
case 'Lunch' : // do something for Lunch
case 'Breakfast' : // do something for Breakfast
default : // do something for not Lunch or Breakfast
}
}
You can do it in POJS like so, this should be cross-browser compatible and doesn't use any 3rd party libraries. Other advantage is that there is only one event listener per element of the named class, uses event propagation.
Javacsript
/*jslint maxerr: 50, indent: 4, browser: true */
/*global alert */
(function () {
"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);
}
}
function whichElement(e) {
var target = e.target;
if (target.tagName === "A" && target.parentElement.tagName === "LI" && target.parentElement.parentElement.className === "list-class") {
alert("The " + target.firstChild.nodeValue + " Link has been clicked");
}
}
addEvent(document.body, "click", whichElement);
}());
On jsfiddle
If you were using some newer/custom HTML tags or XML then you may need to consider tagName case sensitivity, and write the following to be certain.
if (target.tagName.toUpperCase() === "A" && target.parentElement.tagName.toUpperCase() === "LI" && target.parentElement.parentElement.className === "list-class") {
In jquery terms the above could be written as
Javascript
$(document).on('click', '.list-class>li>a', function (e) {
alert("The " + e.target.firstChild.nodeValue + " Link has been clicked");
});
On jsfiddle
In jquery they call this event delegation.
<ul class="list-class">
<li>All</li>
<li>Breakfast</li>
<li>Lunch</li>
</ul>
<script>
$(".list-class li").find('a').each(function(){
$(this).click(function(){
switch($(this).attr('id'))
{
case "hrefID1";
//do what ever
break;
case "hrefID2";
//do what ever
break;
case "hrefID3";
//do what ever
break;
}
});
});
</script>

Detecting data changes in forms using jQuery

I'm using ASP.NET 2.0 with a Master Page, and I was wondering if anyone knew of a way to detect when the fields within a certain <div> or fieldset have been changed (e.g., marked 'IsDirty')?
You could bind the Change event for all inputs and flag a variable as true. Like this.
var somethingChanged = false;
$(document).ready(function() {
$('input').change(function() {
somethingChanged = true;
});
});
But, keep in mind that if the user changes something, then changes back to the original values, it will still be flagged as changed.
UPDATE: For a specific div or fieldset. Just use the id for the given fieldset or div. Example:
var somethingChanged = false;
$(document).ready(function() {
$('#myDiv input').change(function() {
somethingChanged = true;
});
});
Quick (but very dirty) solution
This is quick, but it won't take care of ctrl+z or cmd+z and it will give you a false positive when pressing shift, ctrl or the tab key:
$('#my-form').on('change keyup paste', ':input', function(e) {
// The form has been changed. Your code here.
});
Test it with this fiddle.
Quick (less dirty) solution
This will prevent false positives for shift, ctrl or the tab key, but it won't handle ctrl+z or cmd+z:
$('#my-form').on('change keyup paste', ':input', function(e) {
var keycode = e.which;
if (e.type === 'paste' || e.type === 'change' || (
(keycode === 46 || keycode === 8) || // delete & backspace
(keycode > 47 && keycode < 58) || // number keys
keycode == 32 || keycode == 13 || // spacebar & return key(s) (if you want to allow carriage returns)
(keycode > 64 && keycode < 91) || // letter keys
(keycode > 95 && keycode < 112) || // numpad keys
(keycode > 185 && keycode < 193) || // ;=,-./` (in order)
(keycode > 218 && keycode < 223))) { // [\]' (in order))
// The form has been changed. Your code here.
}
});
Test it with this fiddle.
A complete solution
If you want to handle all the cases, you should use:
// init the form when the document is ready or when the form is populated after an ajax call
$(document).ready(function() {
$('#my-form').find(':input').each(function(index, value) {
$(this).data('val', $(this).val());
});
})
$('#my-form').on('change paste', ':input', function(e) {
$(this).data('val', $(this).val());
// The form has been changed. Your code here.
});
$('#my-form').on('keyup', ':input', function(e) {
if ($(this).val() != $(this).data('val')) {
$(this).data('val', $(this).val());
// The form has been changed. Your code here.
}
});
Test it with this fiddle.
A simple and elegant solution (it detects form elements changes in real time):
var formChanged = false;
$('#my-div form').on('keyup change paste', 'input, select, textarea', function(){
formChanged = true;
});
For a form you could serialize the contents on load then compare serialization at a later time, e.g.:
$(function(){
var initdata=$('form').serialize();
$('form').submit(function(e){
e.preventDefault();
var nowdata=$('form').serialize();
if(initdata==nowdata) console.log('nothing changed'); else console.log('something changed');
// save
initdata=nowdata;
$.post('settings.php',nowdata).done(function(){
console.log('saved');
});
});
});
Note this requires form elements to have a name attribute.
Just to clarify because the question is "within a certain fieldset/div":
var somethingChanged = false;
$(document).ready(function() {
$('fieldset > input').change(function() {
somethingChanged = true;
});
});
or
var somethingChanged = false;
$(document).ready(function() {
$('div > input').change(function() {
somethingChanged = true;
});
});
You can give the fieldset or div an ID and bind the change event to it ... the event should propagate from the inner children.
var somethingChanged = false;
$('#fieldset_id').change(function(e)
{
// e.target is the element which triggered the event
// console.log(e.target);
somethingChanged = true;
});
Additionally if you wanted to have a single event listening function you could put the change event on the form and then check which fieldset changed:
$('#form_id').change(function(e)
{
var changedFieldset = $(e.target).parents('fieldset');
// do stuff
});
I came up with this piece of code in CoffeeScript (not really field tested, yet):
Add class 'change_warning' to forms that should be watched for changes.
Add class 'change_allowed' to the save button.
change_warning.coffee:
window.ChangeWarning = {
save: ->
$(".change_warning").each (index,element) ->
$(element).data('serialized', $(element).serialize())
changed: (element) ->
$(element).serialize() != $(element).data('serialized')
changed_any: ->
$.makeArray($(".change_warning").map (index,element) -> ChangeWarning.changed(element)).some (f)->f
# AKA $(".change_warning").any (element) -> ChangeWarning.changed(element)
# But jQuery collections do not know the any/some method, yet (nor are they arrays)
change_allowed: ->
ChangeWarning.change_allowed_flag = true
beforeunload: ->
unless ChangeWarning.change_allowed_flag or not ChangeWarning.changed_any()
"You have unsaved changes"
}
$ ->
ChangeWarning.save()
$(".change_allowed").bind 'click', -> ChangeWarning.change_allowed()
$(window).bind 'beforeunload', -> ChangeWarning.beforeunload()
An alternative to Dw7's answer if you only want the fields inside a fieldset then you can call serialize() on its input values. Note: serialize() will not pickup any elements that do not have a "name" attribute. This will work for select tags as well.
var initialValues = $('#your-fieldset :input').serialize();
$('form').submit(function(e) {
e.preventDefault();
var currentValues = $('#your-fieldset :input').serialize();
if (currentValues == initialValues) {
// Nothing has changed
alert('Nothing was changed');
}
else {
this.submit();
}
});
.live is now deprecated and replaced by .on:
var confirmerSortie = false;
$(document).on('change', 'select', function() {
confirmerSortie = true;
});
$(document).on('change keypress', 'input', function() {
confirmerSortie = true;
});
$(document).on('change keypress', 'textarea', function() {
confirmerSortie = true;
});
The following solution worked for me:
$("#myDiv :input").change(function() { $("#myDiv").data("changed",true);});
}
if($("#myDiv").data("changed")) {
console.log('Form data changed hence proceed to submit');
}
else {
console.log('No change detected!');
}
Thanks

Categories