I'm getting this really weird behavior..
Here is a simplified version of my code:
DOWN = 40;
UP = 38;
$(document).on("keydown", "#text_input", function(e) {
if (e.keyCode == DOWN) {
$("#list").focus();
}
});
$(document).on("keydown", "#list", function(e) {
if (e.keyCode == UP) {
$("#text_input").focus();
}
});
So basically, if the user hits DOWN key while "#text_input" has focus, the focus shifts to the "#list".
In turn, when the user has focus on "#list" and then hits UP key, "#text_input" regains its focus.
This works fine, EXCEPT the cursor in the "#text_input" automatically moves to the front of the text value when it regains focus. I want to prevent this so that the user can continue typing from where he left off before switching focus to the "#list."
I searched on Stackoverflow to find a way to move the cursor to the end of the text input, and found this solution:
$(document).on("focus", "#text_input", function() {
value = $("#text_input").val();
$("#text_input").val("");
$("#text_input").val(value);
});
This actually did move the cursor to the end ONLY WHEN I switched focus using the Mouse event. For example, when I CLICKed on the blank part of the page and then RECLICKed the "#text_input," the cursor did move to the end of the input.
However, strangely enough, this does not work when I regain focus by using my function, namely Pressing the DOWN key and then the UP key. The cursor still moves to the front of the textfield.
Sorry for making the question confusing,, but this is the best I can do :((
Does anyone know why this is occurring and any possible solution??
Thanks!!!
PS
Just added it to JSFiddle
http://jsfiddle.net/jakeaustin5574/AU9CA/3/
you are almost here.. change your code to be:
$(document).on("focus", "#text_input", function() {
value = $("#text_input").val();
$("#text_input").val("");
setTimeout(function(){
$("#text_input").val(value);
}, 0);
});
If that doesnt fix it, id like to see it on jsfiddle
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!
Right now I'm using a bit of jQuery to hide the iPad keyboard when an input loses focus.
jQuery(function($) {
$(document).on('touchend', function(e) {
document.activeElement.blur();
});
});
However during a process like the checkout when a user clicks from input to input the keyboard disappears and the reappears every time the input is changed. Is there any way to change the above jquery code to where it only blurs the active element if the place on the document that is touched does NOT have an input type of text?
Well, I haven't tried this with iPad before, so I'm not sure that it will work, but you can check the type of document.activeElement to determine if it is a text or textarea field. If it isn't, then perform your blur(). The code would be like this:
jQuery(function($) {
$(document).on('touchend', function(e) {
setTimeout(function() {
var currentElement = document.activeElement;
if ($(currentElement).not("textarea, :text").length > 0) {
currentElement.blur();
}
}, 100);
});
});
The setTimeout is needed to make sure that the focus has transferred to the next element, before checking what the current element is (doing it immediately, will return the <body> as the activeElement).
This general approach (i.e., identifying what type the current activeElement is) works in a desktop browser environment, and it SHOULD work on an iPad, but, like I said earlier, I've not had a chance to test it there, so this is more of a "possible solution" than an actual "answer", until you give it a try and se if it works for you. :D
I have an input element in this jsfiddle: http://jsfiddle.net/stevea/DLe3a/9. If I enter Return after putting something in the field I trigger the change handler and pick up and display the value fine:
$(function() {
$('input#fname').change(function(e) {
$('div#firstName').append(this.value);
});
But what if the user forgets to hit return and closes down the page? I want to come back, in that case, when I sense the page shutting down, and pull out what was entered into the Input field without a Return.
Can I do that? In the jsfiddle I have a button and its handler. Assuming the button click is shutting down the page, how would I respond to the button click to get the value sitting in the input field?
Thanks
Try this sir
$(function() {
$("#fname").change(function(e) {
$("#firstName").append(this.value)
});
$("#getInput").click(function (e) {
});
});
To detect if the page is closing, use the .unload() event
$(window).unload(function() {
var input = $('#fname').val();
});
I believe that you want to do some code when the window is pre-closed.
Here is some sample code: jsDiddle
$('#fname').change(function () {
$('#firstName').append(this.value);
});
window.onbeforeunload = function (e) {
var e = e || window.event;
// get input #fname
$('#firstName').append($('#fname').val());
// do something you want before the window closes
// show confirm message (optional) - if you don't want show message, return '';
//IE & Firefox
if (e) {
e.returnValue = 'You have some unfilled inputs!';
}
// For Safari
return 'You have some unfilled inputs!';
};
The problem isn't detecting a page closing down. The problem is to capture an Input field's content when something external happens before the user enters Return. But after playing around with it more, at this jsfiddle - http://jsfiddle.net/stevea/bT54M/3/ - it turns out that there really is no problem. If you're in the middle of entering text into an Input field and you do something external, like hitting the Get Input button in the jsfiddle above, the change event for the Input is triggered automatically and this.value is what you've entered so far. So the bottom line is that you don't need to hit Return when you're done. Just about anything you do outside of the Input (probably anything that blurs the Input focus) triggers the Input change event.
$(function() {
$('input#fname').change(function(e) {
debugger;
$('div#firstName').append(this.value);
});
$('#getInput').click(function() {
debugger;
$('div#firstName').append(this.value);
});
});
I'm making a single page app that is launching next week, for a pretty huge client, and going live for a pretty big event and well, there's still a ton to finish before then.
There's 100+ 'pages' which are all loaded within a single 700px x 600px window, and I had learned not long ago you could tab through the page/sections, which in-turn would break the app because it would bring focus to hidden off-screen elements, so for this reason, I disabled the tab key for the entire app.
But now there are a couple places where we have a form with a handful of input fields which you are not able to tab through as you fill in the form. It's a pain in the ass.
I need to make it so you can tab through the form fields, but only the form fields. I have the tabindex attribute set for the form, and have tried to make inputs tab enabled but was not able to make it work without causing the app to jump to hidden sections.
Here's the function I need to change so it will disable tab key except from input to input fields in a form.
window.onkeydown = function(e) {
if (e.keyCode === tab) {
return false;
}
}
I tried to do this, which obv didnt work lol
$('input').keydown(function(e) {
if (e.keyCode === tab) {
return true;
}
});
Thanks :)
I made some fixes to what #Joseph posted for an answer to this that handle being able to shift + tab through inputs of a form so you can reverse direction. It was a very annoying thing for me before when I first had to find a way to do this, and didn't have time to waste anymore trying to find a complete solution for this until now. Here it is.
$(function() {
// gather all inputs of selected types
var inputs = $('input, textarea, select, button'), inputTo;
// bind on keydown
inputs.on('keydown', function(e) {
// if we pressed the tab
if (e.keyCode == 9 || e.which == 9) {
// prevent default tab action
e.preventDefault();
if (e.shiftKey) {
// get previous input based on the current input
inputTo = inputs.get(inputs.index(this) - 1);
} else {
// get next input based on the current input
inputTo = inputs.get(inputs.index(this) + 1);
}
// move focus to inputTo, otherwise focus first input
if (inputTo) {
inputTo.focus();
} else {
inputs[0].focus();
}
}
});
});
Demo of it working http://jsfiddle.net/jaredwilli/JdJPs/
Have you tried setting tabIndex="-1" on all elements that you don't want to be able to tab to? I think that's a much better solution.
Otherwise, within your key handler function test event.target (or event.srcElement in IE) to see if the event originated with a form element. You seem to be using jQuery, so you could assign an "allowTab" class just to the fields in your form and then do this:
$(document).keydown(function(e) {
if (!$(e.target).hasClass("allowTab"))
return false;
});
Or
if (e.target.tagName !== "input")
// etc
what we do is to determine what input is next in line and skip to it!:
http://jsfiddle.net/qXDvd/
$(document).ready(function() {
//gather all inputs of selected types
var inputs = $('input, textarea, select, button');
//bind on keydown
inputs.on('keydown', function(e) {
//if we pressed the tab
if (e.keyCode == 9 || e.which == 9) {
//prevent default tab action
e.preventDefault();
//get next input based on the current input we left off
var nextInput = inputs.get(inputs.index(this) + 1);
//if we have a next input, go to it. or go back
if (nextInput) {
nextInput.focus();
}
else{
inputs[0].focus();
}
}
});
});
may need some optimization but it works. this was originally meant to skip non-form elements. you can add selectors not to skip if you like. additionally, you can add logic for the Shift+Tab behavior (maybe before the tab logic)
obviously, it will still go through some elements according to how they appear in the source. however, why not just remove those hidden elements from the DOM but still keep track of them using the methods found in this question. that way, you won't have the pain of having to cycle back and forth through off-screen elements.
I'm trying to bring the typing cursor to beginning of the input text by this code with no success. What is the issue?
HTML
<input value="text"/>
JavaScript(jQuery)
$('input').focus(function(){
$(this).delay(100).trigger(jQuery.Event("keydown",{keyCode: 36, which: 36}));
});
Live at JSBin
This looks like a case of over thinking a problem OR you did not describe it properly. The default behavior of focus is to place the cursor at the beginning of text. Just do this:
$(function() {
$('input').delay(100).trigger('focus');
});
Not sure why you need the delay. Using the jQuery ready event as shown you can elimintate the delay.
So, the problem is not really pressing home but moving cursor to beginning of the texbox I assune.
Checking this answer: move cursor to the beginning of the input field?
Generally the approach is right, but it doesn't seem to work directly
I have modified it to fit your jQuery on focus case:
$('input').focus(function(){
var input = this;
// for some reason, putting directly doesn't work
setTimeout(function() {
if (input.createTextRange) {
var part = input.createTextRange();
part.moveat("character", 0);
part.moveEnd("character", 0);
part.select();
}
else if (input.setSelectionRange){
input.setSelectionRange(0,0);
}
}, 0);
});
Live example:
http://jsfiddle.net/sF334/
If you want to trigger the focus itself, then you can do it as:
$('input').trigger('focus');
// use some unique selector instead in real example, like ID
Note it returns to before the first character on focus, but allows you to move and change selection later as you wish, as soon as you change focus and come back, it'll return to initial position again.