I'm developing an app in phonegap, and I have a complex form that has a text input at the top, then several buttons below it, then more text inputs below them.
My questions is: Is it possible to trigger a function such as a button click through the tab index.
And it would have to be through the tabindex because iphones have a 'next' button, and I would want the function to be triggered when that is clicked.
document.addEventListener('keyup', function(event) {
if (event.keyCode == 9) {
yourFunction();
}
});
Related
I currently have a button with an onclick attribute, directing to a JS function.
After I click it with my mouse, pressing the Enter key clicks the button as well, which I want to disable.
My button:
<button onclick = "action()">Button</button>
My JS function:
function action(){
//do something
}
I tried solutions from Disable Enter Key and Disabling enter key for form, but they don't work.
How do I solve this? Should I not use onclick? I would like a solution in pure JS.
You could have an event listener listening for a keydown event and check if it's the enter key and the target your button. In that case disable the event.
Something like this should work, you can add the correct type:
window.addEventListener('keydown',(e) => {
if (e.keyIdentifier =='U+000A' || e.keyIdentifier =='Enter' || e.keyCode == 13)
if (e.target.nodeName=='BUTTON' && e.target.type=='') {
e.preventDefault()
e.stopPropagation()
return false
}
}, true);
try setting the button to .blur() or set focus to another element
<button onclick = "action();">Click this</button>
function action(){
//do something
this.blur()
}
I'm trying to build a functionality that allows keyboard tabbing between two buttons (CodePen below). More specifically I would like the user to be able to tab onto "button1" and on tab, jump to "button2" and then on tab jump back to button 1.
My solution is to put an event listener on "button1" and listen for a tab keyboard event. When that is triggered, use JQuery's focus() method to shift focus to "button2". On "button2" there is an identical listener that listens for tab event and shift focus back to "button1".
The problem is that when I tab onto "button1", the listener records focus and tab event and shift focus onto "button2" which in turn records focus and tab event and shift it back to "button1" again, creating an infinite loop.
Could I please get suggestions in how to solve this problem?
The real world application of this would be to restrict tabbing within a specific module or section of a page.
Thanks!
Steve
https://codepen.io/steveliu7/pen/WOoMJY
var $button1 = $('.b1');
var $button2 = $('.b2');
var checkButton = function(event) {
if ($button1.is(':focus') && event.which === 9){
console.log($(this))
$('.b2').focus();
return;
};
if ($button2.is(':focus') && event.which === 9){
console.log($(this))
$('.b1').focus();
return;
};
}
$('button').on('keydown', checkButton);
You want to restrict tab navigation between two buttons.
Note that it won't restrict screenreaders navigation to those two buttons.
You have to consider TAB navigation but also SHIFT+TAB navigation
On a purely technical point of view event.preventDefault() is what your are searching for:
var checkButton = function(event) {
if (event.which === 9) {
if ($button1.is(':focus')) {
$button2.focus();
event.preventDefault();
} else if ($button2.is(':focus')){
$button1.focus();
event.preventDefault();
}
}
}
I think what you are trying to do can be achieved much easier with the tabindex property in HTML. If you want to restrict tabbing to certain elements only, you can set tabindex="-1" for those elements that you do not want focused.
Source: https://www.w3schools.com/tags/att_global_tabindex.asp
I want to prevent users from clicking on a server button multiple times causing multiple similar requests to be sent to the server.
Buttons are ASP.Net buttons (Webforms). There are many pages on the website and I don't want to write some codes for every button. I want to do it on the Masterpage for all buttons.
A possible solution would be finding the button and disabling it after it has been clicked. like:
$("input[type='submit']").click(function(){
$(this).attr('disabled','disabled');
});
This code works fine but overrides the previous onclick event of the button. So the button doesn't do the submission or any other tasks that it wants to do.
Another solution is disabling all submit buttons on "onbeforesubmit" event. They will be enabled right after the postback. This is also not a good solution because there are some buttons that update part of the page by Ajax and they can not re-enable other buttons beyond the ajax panel after the postback.
Is there a way to find the clicked submit button and disable it and allow it to do it's onclick event?
I found the answer. Because I use asp.net server buttons, Page won't be submitted if I disable the button in client side onclick event. Instead I disable the button in the second click. In this case I can be sure that page has been submitted one time:
$("input[type='submit']").click(function (e) {
if (e.target && Page_IsValid) {
var attr = $(this).attr('submitting');
if (typeof attr !== 'undefined' && attr !== false) { // If button has submitting attribute then do not submit it again.
$(this).prop('disabled', true);
$(this).removeAttr("submitting");
e.preventDefault();
}
else {
$(this).attr("submitting", "true"); // Add "submitting" attribute to prevent multiple submissions.
}
}
});
Try to use .one():
Attach a handler to an event for the elements. The handler is executed
at most once per element per event type.
$("input[type='submit']").one('click',function(){
$(this).prop('disabled',true);
});
Also, you should use .prop() instead of .attr() to set the state of your input
Or what about this?
$("body").on("click", ".js-submit-button", function() {
var $this = $(this);
$this.prop("disabled", true);
$this.closest("form").submit();
});
I have an ASP.NET page with a Telerik RadEditor (rich text box). When tabbing through a page, when a user gets to the text box, focus gets set to the various toolbar icons before it goes to the textarea. I added some jQuery to one page to set the focus on the text area when tabbing out of the last cell on a form:
$('input[type=text][id*=tbCost]').keydown(function (e) {
var keyCode = e.keyCode || e.which;
if (keyCode == 9) { //If TAB key was pressed
e.preventDefault();
var editor = $('body').find("<%=RadEditor1.ClientID%>"); //get a reference to RadEditor client object
editor.setFocus(); //set the focus on the the editor
}
});
I am looking for a way to implement this functionality in the control so that it will work regardless of the page it is on. For example, in the above code, focus is only set if the user is tabbing out of the tbCost cell. I would like to be able to set the focus to the text area when a user tabs into the toolbar items.
Is there any way to detect when an element is about to get focus? I know I can see if an element has focus, but I can't think of a way to implement this functionality.
Thanks
Solution:
If anybody has this same question in the future and wants an example, here is the code I used:
$(document).ready(function () {
$('.reToolCell').focusin(function () {
var editor = $('body').find("<%=RadEditor1.ClientID%>");
editor.setFocus();
});
});
You might consider binding to a focus on the toolbar icons and redirecting focus to the text area. Although this might have unintended side effects if users are trying to tab-focus these tools in order to use them.
//on focus eventHandler for all your icons that calls a function
#('.elementtype, class or a generic way of identifying the icons'.onfocus(myFunction(this))
//the function take a parameter of your element, moves to the next sibling element and sets the focus
myFunction = (element) {
element.next().focus();
}
I'm trying get my <a> tag triggered when the user press on the "enter" key. (onkeypress).
my <a> tag:
<a href="javascript:search()" onkeypress="return runScript(event)">
this is my javascript :
function runScript(e)
{
if (e.keyCode == 13) {
alert("dssd");
return false;
}
}
I dont know whats messed up ?
its work for me
Open in new window using javascript
javaScript
window.runScript = function (e) {
if (e.keyCode == 13) {
alert('ss');
return false;
}
else {
return true;
}
}
window.search = function () {
alert('s');
}
live demo : fiddle
Write your html as given below. Note the property tabindex which makes the a tag focusable in certain browsers.
<a id="link" href="http://google.com" onkeydown="runScript(event)" tabindex="1">I am a link</a>
If you need an autofocus on load, you can use the jQuery function focus as shown below.
$(document).ready(
function(e){
$("#link").focus();
}
);
Then your function
function runScript(e){
if(e.keyCode == 13){
alert("pressed enter key");
}
}
you have to call e.preventDefault(); (or return false in some browsers) if you want to prevent the link load the link in href.
function runScript(e){
e.preventDefault();
if(e.keyCode == 13){
alert("pressed enter key");
}
return false;
}
see a demo here:
http://jsfiddle.net/diode/hfJSn/9/show press enter key when the page is loaded
The ENTER key actually triggers the onclick event:
<a href="#" onclick="alert('hello!');">
This means that your search() function inside the href will execute before the onkeypress event.
That works in my browser, though I suspect it's not the way to achieve what you actually want to do... (maybe?)
Number one, you probably don't want it to "return" anything, so you can just do onkeypress="runScript(e)" and it'll run. If that function does return a value, it's not gonna go anywhere...
Number two, it's kinda rare that a keydown event would fire on an anchor (<a>) element, unless of course the user tabs through the other elements 'till it has focus and then presses a key (usually the browser will "highlight" the element that currently has keyboard focus, if it's not just the whole page). Are you wanting your script to run when someone presses enter after typing in a search box or something? if so, you probably want to listen for the event on the search box itself, so add it as that element's onkeydown attribute (for example: <input id="mySearchBox" onkeydown="runScript(e)">) if you just want it to run whenever the user presses enter, regardless of focus or typing text into any particular field, just do as edmastermind29's comment said and add the event listener to the whole document.
Have you tried adding this to your script?
document.onkeypress = runScript;