Qualtrics code for text entry - javascript

Does anyone have (or can help) code that will enable respondents move between text entry questions without having to use the mouse. My survey is set up in qualtrics.

If you add the following code to the first text question on a page, it will allow for immediate typing in the first text input field. Then the tab key will move to subsequent fields.
Qualtrics.SurveyEngine.addOnload(function()
{
$(this.questionId).select('.InputText').first().focus();
});

Related

Copying text from one textarea element to another in real-time

I want to copy input from one textarea to another textarea in real-time. This is not a HTML editor or rich text editor. Just plain simple text without any markup.
This is what I am doing:
a. I can detect the point at which the cursor was clicked in the source text area using the following (on mouseup)
$("#txt1")[0].selectionStart)
b. I can detect the text selection using selectionStart and selectionEnd properties on mouseup.
This allows me to keep track of delete to be reflected in the other textarea. That is if delete is the key pressed, and a selection was made I know what was deleted to be relected in the target text area.
c. Where I am stuck is the simple issue of new characters entered. I think keeping track of key pressed would be the inefficient approach as I would have to check if control, alt, shift keys, among others were also held down. Besides there is the issue of repeatedy keys presses. The efficient way is possibly to get the characters actually entered from the source text area and NOT based upon key pressed.
Questions:
How do I get characters entered in the source textarea?
Is there a better way to update the target textarea in real-time? One way will be to continually update the content from the source to the target at regular interval but that would be inefficient. Any other approach?
I am open to using a contentEditable div in place of a textarea.
I need a solution that can work across different device types.
How do I get characters entered in the source textarea?
Just handle the input event of the first textarea and make the second textarea have the same value as the first.
let two = document.getElementById("two");
document.getElementById("one").addEventListener("input", function(){
two.value = this.value;
});
<textarea id="one"></textarea>
<textarea id="two"></textarea>

Keeping text entered into a textarea visible at all times

When entering text into a textarea manually, it remains visible at all times. However I'm using a simple javascript function to enter some text when an icon on the page is clicked.
onClick="addline('xyz')
function addline(sometext)
if(sometext == "xyz")
{
document.getElementById('thearea').value = "Hello world!\n";
}
The problem is, when text entered this way reaches the bottom of the textarea, it disappears from view and the scrollbar just lengthens.
My question is, is there any way to keep the text visible at all times? Thanks.
Thank you for referring me to a similar request for assistance. I have done what I thought was a comprehensive search here and on other web sites to a solution to this issue before posting. Unfortunately, the code suggested doesn't make any difference, the text added using the above function remains hidden in my textarea until the scrollbar down arrow is clicked.

How can I add a tag text input system similar to StackOverflows system

Is it possible to just style the text inside the box? The system I had came up with was:
Make a Div that overlays the box
When typing in the box listen for spacebar
When spacebar is pushed, add it to an array, which then adds it to the list of Tags to appear in the div
When the divs width is > than the input box, limit the width to a set size
When adding more tags than the width allows, push new tag to array, scroll the div to the end and hide the overflow of the other tags
Listen for if the text box is empty and backspace is pressed
If pressed, populate the text box with the text of the last element in the array, and splice the last element to remove it.
This is the current method I mean to implement and can code it just fine. But I was wondering if there is a simpler way to do this and more cross browser / version friendly. I tried googling StackOverflows tag system, tags, tagging, and more but it's all really unrelated stuff. Any input would be nice sorry if this is a poor question, I can delete it or vote to close it if necessary. Thanks.
Number 4 can be written like so:
4.When number of divs is > than 5, return "You are only aloud 5 tags"

Find position at which text was editted in input field

If I want to know when an editable field (say, an input text field or a contenteditable div), I know that I can use the keyup event.
However, I can only see what the new text is, and what the text was prior to the edit, but I would like to get some additional information about the edit.
For example, one case where this would be ambiguous would be if the input text was originally a and the new text was aa. Then:
It could be the case that the user put the cursor before the a, and then typed another a.
It could also be that the user put the cursor after the a, and then typed another a.
It could even be that the user highlighted the a, then hit Ctrl+V (with aa in the clipboard).
I would like to be able to distinguish all the cases. For example, if I could get information of the form "insert a at position 0" or "delete range 0-1 while inserting aa in its place" it would be perfect for my purposes.
Is it possible to get this kind of information?
You could 'diff' the text before and after an edit, however, this will not allow you to distinguish between all of the cases you have mentioned. The only mechanism I can think of is to monitor the cursor (or caret) position each time a keydown event occurs, as described in this answer:
Get caret position in HTML input?

Button to Copy a Text Box

I need a simple script that gives me a button that when clicked will copy the contents of a text input box to the clipboard. Or it could be a script that when you click on the text input box, automatically copies the contents to the clipboard and displays a "Copy" message next to the text input box.
I've seen them all over the web, but can't find the code for one now.
This example uses jQuery:
Assuming an input box with an id of foo, and a button with an id of clickme, here's how I'd do it:
var inputText = "";
$("#clickme").click(function() {
inputText = $("#foo").val();
});
// inputText now has the input box's value
Edit:
After your clarification, I now understand what you are trying to do. Unfortunately, flash 10 broke most of the methods to do this. However, some great people wrote ZeroClipboard, which is fully compatible with flash 10 and makes it really easy to accomplish this task. Their wiki explains usage.

Categories

Resources