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.
Related
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();
});
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"
I have been doing research on this simple sounding issue for a couple of days and I have not seen any result.
In a nutshell my problem is as follows: I would like to select text in a some input field, move focus to another field (or generally speaking some other element), but not lose my selected text.
Such a situation could correspond to a use-case in which I select text in a field, right-click and display a custom popup menu, but do not wish to lose focus of selected text, because I want to do some operations on the previously selected text.
A small code test sample would be (for my initial simple scenario - here I am forcing text selection when the second input field gains focus):
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<input type="text" id="text1" size="20" value="Test1"/>
<input type="text" id="text2" size="20" value="Test2"/>
<script>
$('#text2').focus( function (evt) {
var target = $('#text1')[0];
target.select();
console.log('active/focused element: ' + document.activeElement.id);
});
</script>
</body>
</html>
I have been searching SO and web for a solution to this and have not seen much if any help.
I am not sure this is even really possible (due to the link between blur and selection lost and focus and selection). I have seen a style property called preventDeselect, in another SO answer - this does not work and I have not even such documentation or browser support for this.
I am quite struggling with this and would appreciate some help: even saying I can't do this at all or maybe some ways to go.
UPDATE:
Just for the record, my user scenario, which refers to text selection and context menu, is a common one (it slipped my mind to mention): just select some text in this page (or in an input type field) and right click to get the browser's default context menu - my scenario is different in that i want to use a custom menu, but with similar behavior to the browser's context menu - which normally allows to select some text, cut/copy the selection, navigate within the context menu without losing the selected text. So I think it should be possible somehow :) to do all these things with a context menu and still have your selection.
Attempting to answer this part of your question:
Such a situation could correspond to a use-case in which I select text
in a field, right-click and display a custom popup menu, but do not
wish to lose focus of selected text, because I want to do some
operations on the previously selected text.
For this use-case, I created a quick fiddle: http://jsfiddle.net/4XE9a/1/
Note: Am using the same getSelection function from #David's answer.
If you select any text and then right-click on the input, a custom popup menu appears. Click "option 1". You will find that the selection is not lost even though the focus has shifted to that anchor tag.
However, for the second part of your question regarding focus shifting to another textbox, #David's answer suffices.
Update: (after your comments)
Please see this updated fiddle: http://jsfiddle.net/783mA/1/
Now, when you select some text and right-click on the input it will show the custom popup menu with three options. Use tab to navigate and press space or click on the highlighted option. (Due to paucity of time I could not implement up/down arrow keys, but the concept remains the same)
This demonstrates your question in the comment that the selection is still not lost while navigating the menu.
Note: You are wanting to visually keep the selection highlight and not lose the selection while clicking anywhere else. Please note that this is not possible because text selection behavior is OS implemented. Browser, html etc do not play a role here. The text selection is lost as soon as you click anywhere outside the context of selection. This is because the system starts expecting a new selection as soon as you click anywhere outside. However, controls without text surface are exempt. Button, scrollbar arrows etc will not cause selection to lose.
To view this behaviour, in the fiddle, select some text and then click any dropdown on the left pane. The text selection is not lost, even visually for that matter.
This is why in the new fiddle above, I purposely used buttons to demonstrate.
You can save each selection in an interval, then retrieve it when you like. Here is an example that pulls the selection when the input has focus and clears the interval on blur:
function getSelection(elm) {
var start = elm.selectionStart;
var end = elm.selectionEnd;
return elm.value.substring(start, end);
}
$('input').focus(function() {
var self = this;
$(this).data('interval', setInterval(function() {
$(self).data('selection', getSelection(self));
},20));
}).blur(function() {
clearInterval($(this).data('interval'));
});
Now you can stuff like:
$('#text2').focus(function() {
console.log('selection in #text1 was: '+$('#text1').data('selection'));
});
Demo: http://jsfiddle.net/qCCY5/
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.
I don't know what this is called so its hard to google for it.
If you have a plain html input type=text with a small width eg 20 and then type more characters than can be displayed, it shows the last characters you type. And the first ones are scrolled out of view:
This is my long text // this is the whole string
my long string // this is what is actually visible in the input box
How do I make it so that when you hit tab, the view area resets so that the start of the string is visible and the end is hidden?
my long string // this is what is visible in the input box when typing
This is my // this is what is I want to be visible in the input box after you hit tab
What do you call this, and how do you do it?
I don't know if your question has been answered, but I just felt like answering myself. You can do it by using ranges and window selection. Here, I made a JSFiddle for you.
$(document).ready(function(){
$("input").bind("keyup",function(e){
if(e.keyCode==9){
var r=document.createRange(),
gs=getSelection();
r.setStart(this,0);r.setEnd(this,0);
gs.removeAllRanges();gs.addRange(r);
}
});
$("input").bind("blur"),function(){
$(this).focus();
});
});