I'm developing a Javascript virtual keyboard, and I would like it to appear everytime a user press enter on a text fields. But how can I know if a text (or any input) field is selected?
--clarification
I have to information or control over the page that will be loaded. I just want that, if a input field is selected and the user press enter, my virtual keyboard shows up.
--update
Does it makes any difference if what I'm trying to do is a firefox extension? (I think it shouldn't)
use jQuery and add the following
$(document).ready(function() {
//apply action to input elements by class
//$("#.input_class").keypress(function(e) {
//apply action to all input elements ( input, textarea, select and button )
$(':input').keypress(function(e) {
if(e.keyCode==13){
// Enter pressed... do anything here...
alert($(this).val());
} else {
//make shure you get the desired action for other keys pressed
xTriggered++;
}
//do not submit the form
return false;
});
});
bind it to the onfocus event. That event is triggered when the input element gets the focus. You could remove the keyboard again on the onblur event if you want to hide it again.
To get notified that a text field is selected, you could attach an event handler to onfocus of the fields you're interested in.
Example in jQuery (jQ chosen for brevity, the event works in plain JS):
$('input[type="text"]').focus(function(event){
// do something here
});
If you only care to capture the "enter" key, you don't need to worry about focus, just attach to the onkeypress event of the textfields (see #poelinca's answer).
Despite of what jquery apologetes say, there is no hassle to instrument all fields without resorting to large and slow external library:
for (var i = 0; i < document.forms.length; i++)
for (var j = 0; j < document.forms[i].elements.length; j++)
if (document.forms[i].elements[j].tagName.match(/^INPUT$/i))
if (document.forms[i].elements[j].type.match(/^TEXT$/i))
document.forms[i].elements[j].addEventListener('focus', function(){/* your stuff here */}, false);
My solution, for now, was use a specified key just to open the virtual keyboard when the user request.
Related
I am using EasyAutocomplete, it works well, only problem I am facing - Input box loses control when EasyAutocomplete is attached to it.
I want EasyAutocomplete to get activated after the user has typed 2 characters.
When I type 1 character nothing happens as needed, but after 2nd character has been typed EasyAutocomplete must get attached and should start working. However, what happens is I have to click outside of the input box to make things happen.
It is just this 'outside click', that I have to do to make this plugin work, is problematic for me.
I have tried input event as well but i did not work as required.
The change event seems quite suited for my requirement.
How do I solve this issue?
var ib = $("#inputbox");
$(document).on("keyup", ib,function(e) {
leng = ib.val();
});
$(document).on("change", ib,function(e) {
if(leng.length < 2){
#do something
}else{
ib.easyAutocomplete(options);
}
});
First you should change "change" by "keyup"
Second leng doesn't update as you put it outside of the event
Lastly an event on document may not be the best if you want this event to trigger only on this element, change document by your element
$("#inputbox").on("keyup", ib,function(e) {
if($("#inputbox").val().length < 2){
#do something
}else{
ib.easyAutocomplete(options);
}
});
I have following jquery code, where on click of a check box I will show a popup value.
Except in IE,in all other browser it works as expected. That is, on change the check box will be checked and the popup will be opened.
However in IE8 its not getting checked, however popup is displayed properly.
Code :
$('#TAndC').change(function(){
if( $('input[name="TAndC"]').is(':checked'))
{
$('#TandCBox').show();
var termsandcondition = GetEnum().TermsandConditionsPageId;
var actionURL = '#Url.Action("ShowTAndC", "Account", new { isFromCheckBox = true })';
$('.popUpForm').load(actionURL);
var msgBox = $('#terms').attr('href');
MaskMsgPopUp(msgBox);
return false;
}
});
If your element is a checkbox and not a dropdown then use click anyway.
If your selector is referring to a dropdown use click if you need to support IE8 and older.
See why that is below.
According to the MSDN for change/onchange, the event is not triggered until the change is committed.
In addition the event is also not triggered when the value is changed programmatically.
To quote:
This event is fired when the contents are committed and not while the
value is changing. For example, on a text box, this event is not fired
while the user is typing, but rather when the user commits the change
by leaving the text box that has focus. In addition, this event is
executed before the code specified by onblur when the control is also
losing the focus. The onchange event does not fire when the selected
option of the select object is changed programmatically. Changed text
selection is committed.
To invoke this event, do one of the following:
Choose a different option in a select object using mouse or keyboard navigation.
Alter text in the text area and then navigate out of the object.
If you must support IE8 and older, you are probably better of to use the click event instead which get's triggered when you release the mouse and your new choice is selected.
instead of .change use below code and try
$(document).ready(function(){
$(document).on('click','#TAndC',click_function){
if( $('input[name="TAndC"]').is(':checked'))
{
$('#TandCBox').show();
var termsandcondition = GetEnum().TermsandConditionsPageId;
var actionURL = '#Url.Action("ShowTAndC", "Account", new { isFromCheckBox = true })';
$('.popUpForm').load(actionURL);
var msgBox = $('#terms').attr('href');
MaskMsgPopUp(msgBox);
return false;
}
});
});
I have the following input element on my page:
<input class="input" name="custom_fields[new]" placeholder="Enter placeholder" type="text">
I have a Twitter Flight event listener on this element that looks like this:
this.on('keyup', {
inputsSelector: this.updateViewInputs
});
Which triggers this method:
this.updateViewInputs = function(ev) {
var isDeletionKeycode = (ev.keyCode == 8 || ev.keyCode == 46);
// Remove field is user is trying to delete it
if (isDeletionKeycode && this.shouldDeleteInput(ev.target.value, this.select('inputsSelector').length)) {
$(ev.target.parentNode).remove();
}
// Add another field dynamically
if (this.select('lastInputsSelector')[0] && (ev.target == this.select('lastInputSelector')[0]) && !isDeletionKeycode) {
this.select('inputsContainer').append(InputTemplate());
}
// Render fields
that.trigger('uiUpdateInputs', {
inputs: that.collectInputs()
});
}
And finally triggers uiUpdateInputs:
this.after('initialize', function() {
this.on(document, 'uiUpdateInputs', this.updateInputs)
});
this.updateInputs = function(ev, data) {
// Render all inputs provided by user
this.select('inputListSelector').html(InputsTemplate({ inputs: data.inputs }));
}
All of this functionality works as expected on Chrome and Firefox. Users can type into the input and see the page change in 'real time'. Users also get additional fields that they can enter text into and see the page change.
The issue in question arises when using Safari, as a user enters text into the described input field the text in the input field becomes highlighted (selected) and when they enter the next character all the content is replaced with that single character. This results in the user not being able to enter more than 1 or 2 characters before having them all replaced by the next entered character.
I have tried several approaches to fix this problem but none have worked, they include:
Using a setTimeout to delay the code run on the keyup event
Using Selection to try to disable the selection of the text using collapseToEnd.
Using click,focus,blur events to try to remove the selection from the entered text
Triggering a right arrow key event to try to simply move the cursor forward so they user does not delete the selected text
Using setInterval to routinely remove selections made by the window
I am very confused why this is happening and I am wondering if this is a bug in webkit with Flight. I see no issue with the Firefox or Chrome versions of this page. Thanks for any help!
This seems to be an issue with certain versions of Safari. When listening for the keyup function in javascript it will automatically select all of the text in the box and subsequently delete it all when the next key is typed. To prevent this from happening call preventDefault on the event object that is passed to the keyup function.
this.on('keyup', function(e) {
e.preventDefault()
});
I have a set of radio buttons with an onclick event that hides/shows an area of the website. The onclick also enables/disables spry validation.
The onclick is working great! However, not sure how to trigger the onclick when the page is loaded and the radio button is marked as clicked.
For example, the user may select radio button on the main page. Then later in the form process the user may want to edit the input that they put in. I would then check the radio button that the user had selected on the main page. Since the user has not clicked the radio button the hidden area still remains hidden.
window.onready=function()
{
if(document.getElementById('yourRadioButtonId').checked) {
//call your function, that you want to be triggered, as you will have the same call back function bounded for your onclick event
}
or
window.onready=function()
{
var radioButton=document.getElementById('yourRadioButtonId');
if(radioButton.checked) {
radioButton.click();
}
}
Note: Not not all browsers allow simulated events in this way. Please see the jQuery source for the trigger method to see how all the browser quirks are handled.
The best way to handle this is to write a helper function. Later, this helper function can be called by both of onClick (on radio button) and onLoad (on body element) events. This function will get the valu of your radio button and will do the stuff based on the result.
For example:
function handleRadioButtonStateAction() {
var radioButtons = document.getElementsByName('theRadioButtonName');
for (var x = 0; x < radioButtons.length; x ++) {
if (x == yourDesiredButton && radioButtons[x].checked) {
//do action
}
}
}
On my page I'm using a form which on submit should get some extra hidden fields. The problem however is that I can't know the name/id of the form nor the submit button so I can't use functions like onClick etc. Therefore I'm using the beforeunload event to trigger an event when the user tries to leave the page (this includes submitting a form). I'm using the document.activeElement to find out what triggered the event and if it's a form/submit I'm adding the hidden fields to the form.
Stripping down the code it comes down to something like this:
var javascriptData = ['val1','val2','val3']; // usually gets values dynamically and can differ in size
$(window).bind('beforeunload', function(e) {
var activeForm = document.activeElement.form;
for(var i = 0; i < javascriptData.length; i++){
$(activeForm).append('<input type="hidden" name="test-data[]" value="'+javascriptData[i]+'" />');
}
return false; // just for debug purposes.
}
The code works and the element is added to the form but it doesn't show up in the $_POST on the next page. However, the final line of code (return false) creates a pop-up asking if I want to leave the page, if I stay on the page, press the submit button again and then leave the page and check $_POST, the field there. My guess is that the data for the $_POST is collected before the beforeunload function is triggered.
My question is: "Is there a way around this so I can add a hidden field to a form in the beforeunload event?".
Help is much appreciated, thanks in advance.
Why not add it to all forms on the page?
$(document).ready(function() {
$("form").append('<input type="hidden" name="test-data[]" value="test" />');
});
Like the comments above mentioned, you can just hook onto the submit event.
$('form').submit(function() {
for(var i = 0; i < javascriptData.length; i++){
$(this).append('<input type="hidden" name="test-data[]" value="'+javascriptData[i]+'" />');
}
}