first post. I am attempting to create a text "input" box that will allow any of three commands "who", "why" and "how" to link to corresponding pages in my website. To clarify, I want my homepage to have a text box that will allow the user to type one of the three above commands then press "enter" to link to the corresponding page. Sounds easy, but I am a super beginner. Any help would be great thanks.
You would add a keydown listener to the input box in JavaScript and listen for keycode 13 (enter button keycode). If it is pressed, test the value for who, why, and how.
<input type="text" id="LinkBox" />
document.getElementById("LinkBox").onkeydown = function(e) {
var keyCode = e.keyCode || e.which;
// 13 is keycode for the enter key
if ( keyCode === 13 ) {
if ( this.value === "who" ) {
window.location = // who URL here
} else if ( this.value === "why" ) {
window.location = // why URL here
} else if ( this.value === "how" ) {
window.location = // how URL here
}
}
}
Related
I'm trying to disable a submit button to check if all the input fields are filled before submitting. I've checked and used most of the codes here. I have found a handful that works, but the problem is the code works when I check it on a console window, but it doesn't work when I include it on a WordPress site. I'm using Skyboot Custom Script Panel and i have put the script after the footer.
Here is the code:
var $ = jQuery.noConflict();
$(document).ready(function() {
$('button').attr('disabled', true);
$('input').on('keyup blur', function() {
if ($('[data-wof-field~="primary_email"]').val() != '' && $('[data-wof-field~="text_2"]').val() != '' && $('[data-wof-field~="number_1"]').val() != '' && $('[data-wof-field~="text_1"]').val() != '') {
$('button').attr('disabled', false);
} else {
$('button').attr('disabled', true);
}
});
});
Thanks in advance,
I would like to enter the form ,
when press enter the input box , it will submit the form
$('input[type=text]').keypress(function(event) {
if(event.which == 13) {
//enter pressed
active($(this));
}
});
Test it on android mobile, but the keypress can not detect the keycode
How to block this behavior? Thanks a lot
$("input:text").keypress(function(event) {
if (event.keyCode == 13) {
event.preventDefault();
active($(this));
}
});
There we use preventDefault to block his default behavior.
$('input[type=text]').keydown(function(event) {
var keyCode = event.keyCode || event.which;
if (keyCode == 13) {
active($(this));
}
});
I am trying to make sure the popover gets closed if i click anywhere on ui. Please have a look at the sample code at https://jsfiddle.net/vk23nmy8/15/ .
On click of Add, it adds rows to table. Each row has its popover. It works for first few clicks but then does not work at all. I am not sure what I am doing wrong here.Below is the code I am using to close tje pop-up.
$('body').on('click', function(e) {
var count = 0;
$("#tbody > tr").each(function() {
$('[data-toggle="popover' + count + '"]').each(function () {
if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
$(this).popover('hide');
}
});
count++;
});
});
Thanks for your help.
I'm building a form with 2 dependant fields - the first is filtering the second. I'm using Drupal 7 Form API and doing it with '#ajax' property to the first field.
The first field is Drupal autocomplete and may be because of this the "change" event is not triggered. In Firefox it works fine - on Chrome and IE it doesn't.
I tried checking the change event in my js script but it is not triggered at all.
Any ideas?
Make the following changes in the file at /misc/autocomplete.js
change:
Drupal.jsAC.prototype.select = function (node) {
this.input.value = $(node).data('autocompleteValue');
};
to:
Drupal.jsAC.prototype.select = function (node) {
this.input.value = $(node).data('autocompleteValue');
$(this.input).trigger('change');
};
this will allow the change trigger to work when the choice in the autocomplete list is clicked.
In order for the change to trigger when it is selected with arrow keys and pressing enter, you need to add the trigger in the hidePopup function changing:
Drupal.jsAC.prototype.hidePopup = function (keycode) {
// Select item if the right key or mousebutton was pressed.
if (this.selected && ((keycode && keycode != 46 && keycode != 8 && keycode != 27) || !keycode)) {
this.input.value = $(this.selected).data('autocompleteValue');
}
// Hide popup.
var popup = this.popup;
if (popup) {
this.popup = null;
$(popup).fadeOut('fast', function () { $(popup).remove(); });
}
this.selected = false;
$(this.ariaLive).empty();
};
to:
Drupal.jsAC.prototype.hidePopup = function (keycode) {
// Select item if the right key or mousebutton was pressed.
if (this.selected && ((keycode && keycode != 46 && keycode != 8 && keycode != 27) || !keycode)) {
this.input.value = $(this.selected).data('autocompleteValue');
$(this.input).trigger('change');
}
// Hide popup.
var popup = this.popup;
if (popup) {
this.popup = null;
$(popup).fadeOut('fast', function () { $(popup).remove(); });
}
this.selected = false;
$(this.ariaLive).empty();
};
Once you make these changes to the autocomplete.js file, you should be able to call the .change trigger like normal.
Drupal 7 Autocomplete uses the event autocompleteSelect. This encompasses select and change when done with mouse or keyboard. Depending on how you build or alter a form you will need to set the #ajax property in different places. Replace all my_ prefixed values with your code specific variables.
Building the form yourself in code would be:
$form['my_field']['#ajax'] = array(
'event' => 'autocompleteSelect',
'callback' => 'my_callback',
'wrapper' => 'my_wrapper',
);
Using hook_form_FORM_ID_alter() this is:
$form['my_field']['my_language'][0]['target_id']['#ajax'] = array(
'event' => 'autocompleteSelect',
'callback' => 'my_callback',
'wrapper' => 'my_wrapper',
);
Try use "autocompletechange" event. Some like thet code
$('your selector').on('autocompletechange', function() {
code;
});
I am developing a webpage using Wordpress 3.04, and I'm experiencing the following issue:
In this webpage, I implemented a script that changes the background image every 10 seconds or so. Now, when users press the Left Arrow and Right Arrow keys, it makes the background picture change back and forth accordingly, and messes up the rotation cycle.
This becomes a problem in the Contact Form section of the site, since users that might need to navigate left and right inside each field might end up changing the background pic instead.
I would also like to disable the "Enter" key, to avoid the form being sent if the users are not done writing their message.
I looked around and found this javascript code that didn't work:
document.onkeydown=function DisableCTRL(e)
{
var val=(document.all)?event.keyCode:event.which;
if(parseInt(val)==17)//CTRL
{
alert('Not Allowed!');
window.event.returnValue=false;
}
}
This JS code didn't work either:
function stopRKey(evt) {
var evt = (evt) ? evt : ((event) ? event : null);
var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
if ((evt.keyCode == 13) && (node.type=="text")) {return false;}
}
document.onkeypress = stopRKey;
Any help will be greatly appreciated. Thanks!
I think, you should call stop() on the passed event, i.e.
document.onkeydown = function(e) {
if (e.keyCode == 17) {
alert('Not Allowed!');
e.stop();
}
};
and maybe use addEventListener(). I am not sure, intercepting the Ctrl key down will actually turn of Ctrl altogether. I guess, you need to intercept cursor left/right with the ctrlKey attribute set. For testing key events, see e.g. http://unixpapa.com/js/testkey.html.
PS. document.all: http://javascript.about.com/od/hintsandtips/a/worst_4.htm
You need to call e.preventDefault() to stop the event from going ahead.. I wrote this function to handle unwanted keys on a site recently:
PreventIllegalKeyPress = function (e) {
if (e.target) t = e.target; //Firefox and others
else if (e.srcElement) t = e.srcElement; //IE
if (e.keyCode == 116) { //prevent F5 for refresh
e.preventDefault();
}
if (e.keyCode == 122) { //F11 leave fullscreen
e.preventDefault();
} else if (e.altKey && e.keyCode == 115) { //Alt + F4
e.preventDefault();
} else if (e.altKey && e.keyCode == 37) { //Alt + left
e.preventDefault();
} else if (e.altKey && e.keyCode == 39) { //Alt + right
e.preventDefault();
} else if (e.ctrlKey && e.keyCode == 82) { //Ctrl + R (reload)
e.preventDefault();
}
if (!(t.tagName == 'INPUT')) {
if (e.keyCode == 13) { //enter
e.preventDefault();
}
if (e.keyCode == 8) { //backspace
e.preventDefault();
}
}};
Note the check for t.tagName == "INPUT". This makes sure that both enter and backspace keys are allowed in input field but no-where else.
Then in $(document).ready, paste the following snippet to call the function:
$(document).keydown(function (e) {
NFS.PreventIllegalKeyPress(e);
});
This works perfectly fine for me.