Javascript noob here. A bit stuck with respect to a mfa input field verification I'm trying to implement for my web app.
Instead of having the user hit the "Submit" button after they enter an mfa code in the input field, I want to simply fire my backend service when the field length reaches 6 characters. I've seen this done elegantly on a number of sites.
In my case it fires the lambdas function 4 times in a row when I click out of the field. I can't quite get my head around why it's firing 4 times, as opposed to once?
My assumption is because I'm trying to account for keyup, keypress, blur, and change simultaneously? By doing so I was trying to factor for multiple user behaviors, for example: loss of field focus, a tab out of the field, or an "enter" key press.
$("#login2fa").inputmask("9 9 9 9 9 9").on("keyup keypress blur change", function() {
var $el = $(this);
var code = $el.val().replace(/[^\d]/g, '');
if (code.length === 6) {
lambdas.userLoginMfaConfirm(session_token, code, handleConfirmResult);
}
});
Answering my own question, thanks to a comment from #camillo!
It turns out having multiple .on functions would run the call multiple times. By adjusting the on function to only contain "keyup" it worked as intended.
$("#login2fa").inputmask("9 9 9 9 9 9").on("keyup", function() {
var $el = $(this);
var code = $el.val().replace(/[^\d]/g, '');
if (code.length === 6) {
lambdas.userLoginMfaConfirm(session_token, code, handleConfirmResult);
}
});
Related
I am trying to make Qualtrics focus automatically on a text box (single question per page) so participants can start typing right away.
I have tried different things from other answers (e.g.,Qualtrics: Automatic blinking cursor (focus) does not work on JFE, only on SE surveybuilder) but the focusing doesn't work on browsers like IE (Firefox, without including code, automatically focuses on the question).
The code also seems to invalidate code for advancing to next page by pressing "Enter" (below), so the survey gets stuck on the page
Qualtrics.SurveyEngine.addOnload(function()
{
this.hideNextButton();
this.hidePreviousButton();
var that = this;
Event.observe(document, 'keydown', function keydownCallback(e) {
var choiceID = null;
switch (e.keyCode) {
case 13: // 'enter' was pressed
choiceID = 1;
break;
}
if (choiceID) {
Event.stopObserving(document, 'keydown', keydownCallback);
that.clickNextButton();
}
});
});
Any ideas how to fix this? thank you!
The problem with your code may be hideNextButton with addOnload due to timing issues. Use addOnReady instead. Also, it is best to check for the existence of the PreviousButton first. If is is not there it will cause an error and stop your script. On some browsers you have to select a field before you can focus on it, activate() does that. Finally, it is better to add your event handler to the text field, instead of the document.
Try this:
Qualtrics.SurveyEngine.addOnReady(function()
{
$('NextButton').hide();
if($('PreviousButton')) $('PreviousButton').hide();
var inputText = $(this.questionId).down('.InputText');
var evt = inputText.on('keydown', function(e) {
if(e.which == 13) {
evt.stop();
$('NextButton').click();
}
});
inputText.activate();
});
Is there any way to have the cursor placed in the first text box, say for a form field in Qualtrics? I need people to input their contact information (street address, city, state etc.) and I'd like the cursor to be automatically placed in the top box. I can do it with single questions but haven't figured out how to do it with the form field.
Thanks!
Is there really a way with which i could count the number of times, the enter key is pressed in a webpage. Not within an element say, a text box for an example, but rather the whole webpage. say if i open google.com and type something in the search box and hit enter, so the count is one. as such, another search would give 2 enters pressed.any suggestions or ideas?
You can achieve this by using following approach:
var noOfCounts = 0;
$(document).on('keyup', function(e){
if (e.which == 13){
noOfCounts ++;
}
});
You want a JS event listener
MDN Docs
Specifically keydown.
window.addEventListener('keydown', function(e){
console.log(e.keycode);
});
Then figure out which keycode you need and run your validation and other functions from there.
I'm trying to create a simple submit form in WYSIWYG Web Designer 10 but I have a BIG problem with Enter key. There are several edit boxes on the form and I'd like to have the following functionality (via JavaScript):
1. Enter key on an Edit Box should not submit the form.
2. Enter key on an Edit Box should set focus to the following element (edit box or a submit button). Submit button is the last element in tabIndex order.
3. To submit the form user must:
either click the submit button,
or press Enter when the submit button has the focus.
4. Must work in any browser.
This is a snippet that works quite good (it sets focus to the next element):
var elem = document.activeElement;
var tidx = +(elem.getAttribute('tabindex')) +1,
elems = document.getElementsByTagName('input');
for (var i=elems.length; i--;)
{
var tidx2 = elems[i].getAttribute('tabindex');
if (tidx2 == tidx) elems[i].focus();
}
The only problem I have is Enter key (keyCode) validation which should precede the code to change focus. I have been testing in FF 32, PaleMoon 25 (FF clone), Chrome 38 & IE 10.
Thank you very much for your time in advance.
P.S. I'm a newbie in JavaScript. I use to work with MS Access where similar problem would be solved within two minutes.
I have spent several hours on this simple task but no luck. I have tried many examples that I've found on the web (incl. stackoverflow.com). As to event handling (where I'm trying to test the keyCode) various browsers behave differently.
I tried and mixed a lot of found in web and created this one.
So far it's working for me... just give it a try
$(document).on('keypress', 'input, select, checkbox, radio, button', function (e) {
return focusNextOnEnter(e, this);
})
and the function somewhere in your JS file.
function focusNextOnEnter(e, selector) {
var longSelector = 'input:visible:enabled:not([readonly="readonly"]), textarea:visible:enabled:not([readonly="readonly"]), select:visible:enabled, button:visible:enabled';
var keyCode = e.keyCode || e.which;
if ($(selector).is(':not(textarea)') // it's not a textarea - enter in text area
&& keyCode === 13 // it's enter key
&& !($(selector).attr('id') === 'submitButton')) // it's not submitButton, save-on-enter here
{
e.preventDefault();
$(longSelector)[$(longSelector).index($(selector)) + 1].focus();
return true;
}
}
instead of the last check
$(selector).attr('id') === 'submitButton'
you can always check
$(selector).is('[type="submit"]')
this will hopefully return what you are looking for i.e. submit on enter on submit button
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 just realized that this piece of code works well in Firefox but not in IE 8. I need to automatically populate the list when the user enters at least 8 characters in the input field.
$('#inputField').keyup(function (event) {
var $inputField = $(this);
if ($inputField.val().length >= 8) { popularListBox(); }
});
function populateListBox(){
$.get("Default.aspx?name=test", function(data) {
$('#listBox').children().remove();
var options = data;
$("#listBox").html(data);
});
}
You want to detect the change in input field and then do some actions, right?
I think you may detect the changes instead of keyboard actions only. For example, how about if the user paste from clipboard?
Please try these codes:
$('#inputField').bind('propertychange input paste', function() {
// do poppularListBox()
});
It works for most input field including textarea. Please check jQuery site for more information.
In my experience, .keyup() and .keypress() often get errors in IE. I would like to use .keydown() if possible (case by case)