The user needs to press the key X for the function to run and it works perfectly where there is a physical keyboard but how can I force a virtual keyboard on the mobile version? I can't think of a way to do this without adding an input field.
document.addEventListener("keyup", function(event) {
if (event.keyCode === 88) {
newx();
}
});
function newx()
{alert("Hello");
}
<h1>Key in X</h1>
The repl I'm using this for -> https://home.ajkallivayalil.repl.co/
After some searching on Google, I came up with this, but I suggest you make another user experience, as #95faf8e76605e973 said. (e.g. a button)
If you have some sort of input field and make it hidden, like using display: none or visibility: hidden, you can use JavaScript to activate it anytime, thus bringing up a keyboard.
To do this, you just have to use .focus() on your element.
A link to the SO page I found.
Related
Most keys on a mobile smartphone keyboard produce a keycode with the following code, however the "Next" and "Prev." buttons do not:
$('#txtRegMobileNumber2').keydown(function (e) {
alert('Key pressed: ' + e.keyCode);
});
How can I capture the "Next" button press (equivalent to the arrows in iOS) in Javascript?
This other question may be a duplicate, but seeing as how the code does not work for me I still need help. I've tried using e.which and keyup() to no avail.
If you are concerned in capturing when the user moved away from your text field, maybe consider the blur() JavaScript event?
https://developer.mozilla.org/en-US/docs/Web/Events/blur
Perhaps a bit late answer but this issue can be solved with adding inputmode property to your input and setting it's value to 'search' thanks to that the "Go"/"Next" button on the keyboard is replaced by "Enter" that behaves the same way as normal enter button on a traditional keyboard.
<input id="txtRegMobileNumber2" inputmode="search"
Docs:
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode
Use remote debugging with console output and press those keys to get the code.
Okay, so for our app we have a sidebar with a long list of all the different pages available to that current user. At the top of the sidebar is an input which, using Javascript, only shows options on the sidebar that contains the word(s) they searched for.
Is there any way of achieving this without actually having an input, or using a hidden input?
I want it so when the user types, as long as they aren't focused onto another input/textarea/whatever, it refines the sidebar. I'm not sure if you've seen the new MySpace but that's exactly what I'm going for.
Here is a quick example to point you in the right direction. Every time a key is pressed the event is checked to see if it was activated in an input. If not the character code is logged to the console.
$('body').on('keypress', function(e) {
if ($(e.target).is('input')) {
return;
}
console.log(e.which);
});
Listen to the keypress event on document. Then get the target from the event to determine if it's an input or similar.
$(document).keypress(function(event) {
if ($(event.target).is('input')) {
return;
}
event.preventDefault();
});
Take a look at the jQuery Hotkeys plugin.
Safari helpfully (?) prompts before closing a tab or window when text has been entered into an input.
There are some cases where, as a web developer, this isn’t desirable — for example, when the input is a live search where the user has probably already gotten the results he’s looking for when the window is closed, even though there’s still text in the field.
How can I let Safari know that text in a particular input doesn’t need its protection?
It seems like you are able to disable this warning for an entire page by having an onbeforeunload handler on <body> (even an empty one will do). For example, the following will not produce the warning:
<body onbeforeunload="">
<form method="get"><input></form>
</body>
I'm not sure if this is the intended behaviour, or a bug.
I think I've got a solution to this problem, though it's unquestionably a hack (i.e. if Safari changes how this feature is implemented, it could stop working). Shown here with a touch of jQuery:
$('.unimportant').live('blur', function(){
var olddisplay = this.style.display;
this.style.display = 'none';
this.clientLeft; // layout
this.style.display = olddisplay;
});
Demo (try typing in the "unimportant" field, click somewhere else on the page, then close the window).
In short:
Hide the input
Trigger layout
Show the input
You can also change the value of the input, trigger layout, and change it back.
The one limitation here is that cleaning the input has to be done explicitly. In this case, it will be dirty until blur. This works well in my situation, and probably in many others, since the input will be protected from an accidental window close until something else on the page is manipulated (e.g. a link is clicked). You could choose to run this on keyup if you're willing to live with a flicker of the insertion point every time a key is pressed.
I'm open to cleaner solutions.
I found what I think is a pretty good solution to this problem. When I use AJAX to submit the form then I want the warning to suppress. This is accomplished with onbeforeunload.
window.onbeforeunload=function(e){}
But after I submit I might make additional changes and so I want the warning to show again. To do this I added a keyup handler to a form element.
$('txtarea').onkeyup=dirty;
What dirty does is checks is the input field has changed if it has then I set onbeforeunload to null.
function dirty(e){
if (e.srcElement.value != e.srcElement.defaultValue){
window.onbeforeunload=null;
}
}
I just found another solution to prevent Safari from displaying the "Are you sure you want to reload this page?" dialog when textareas have changed their content.
It turns out that setting the value through Javascript clears Safari's changed state:
$(document).on('blur', 'textarea', function() {
var value = $(this).val();
$(this).val('').val(value);
});
Clearing the value first is important, directly setting it to the content it already is does not work.
EDIT Apparently setting window.onbeforeunload to an empty function still works, however $(window).on('beforeunload', function() {}) does not.
I'm using ASP.NET, but on a certain page I am using regular html text boxes as the request is done with AJAX, rather than the traditional full page post back. My issue is that when the user fills out the last text box and presses enter the text box loses focus and the page scrolls all the way to the bottom.
I tried using the onblur event but it's not working, so I'm wondering what event is actually being called when the enter key is pressed(or any key for that matter).
I tried this:
$("#loginPass").blur(function (e) {
if (e.keyCode == 13)
$("#DealerLogin").click();
});
I have firebug for Firefox but can't figure out how to look at what js related operations are firing.
In the Firebug scripts panel, you can click the pause button:
Try it right before you hit enter, then step through the code.
I wouldn't call myself a javascript expert, but this is what I would try.
When I get stuck, and don't know if or when my methods are being called , I fall back to using the trusty old "alert('in method 1');" technique to debug my code.
$(document).ready(function(){
alert("In document.ready()");
$("#loginPass").blur(function(e)
{
alert("In loginPass.blur() with keycode = " + e.keyCode);
});
$("#loginPass").keydown(function(e)
{
alert("In loginPass.keydown() with keycode = " + e.keyCode);
});
});
It certainly isn't an elegant technique, but is often revealing. If you find none of your methods are getting called, I guess make sure your text box id correctly matches "loginPass".
My issue is that when the user fills
out the last text box and presses
enter the text box loses focus and the
page scrolls all the way to the
bottom.
Hmm. This is definitely not a default behaviour for browsers. You need to know, what does this and just catch this event or part of code.
I have a MenuBar setup with YUI's MenuBar widget, and I have a YAHOO.util.KeyListener attached to document to get quick keyboard access to the menus and sub-menu items (e.g. 's' to open the Setup menu). The problem is that the keylistener will still fire when a user is in an input element. For example, a user might be typing soup into a text field, and the 's' character will cause the Setup menu to pop open.
One solution would be to disable the keylistener when focus is on an input element, and enable it on blur. How would I go about doing this? Is there a better solution?
I commend you for trying to provide keyboard shortcuts, but be aware that this will be a bit of a pain to implement cross-platform. If it's feasible, I strongly recommend using access keys on <a> tags.
If you're still going, I guess accesskey won't work for you. I'll assume you've read the relevant YUI tutorial.
If blur and focus are really the right way to go, I'd use something like
YAHOO.util.Event.onDOMReady(init);
function init() {
// set up the keyboard listeners
setUpExceptionsToKeyboardShortcuts();
}
function disableShortcuts() {
// Do what you've got to do
}
function enableShortcuts() {
// Do what you've got to do
}
function setUpExceptionsToKeyboardShortcuts() {
var focusable = document.getElementsByTagName('input');
focusable = focusable.concat(document.getElementsByTagName('select'));
focusable = focusable.concat(document.getElementsByTagName('textarea'));
YAHOO.util.Event.addListener(focusable, 'focus', disableShortcuts);
YAHOO.util.Event.addListener(focusable, 'blur', ensableShortcuts);
}