Mobile selecting of text inputs - javascript

If i have an input type=text and am viewing it on a mobile device, if I press inside the input and hold down on the text (let's say it's a url), the entire url won't be selected. Only a single word will be. I want to be able to easily select the entire text and then copy it. Is there a way to do this in css or html? I can select all the text with javascript but then trying to touch down to copy does the same thing, only selects a word.
for instance:
<input type="text" value="http://foo.bar">
I click in the middle and only "foo" gets selected. I want to select all the text so it's easy to copy

Here you go:
$('input').focus(function() {
this.select()
});
$('input').click(function() {
this.focus();this.select()
});
Implemented here: http://jsfiddle.net/4XJDW/

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>

Javascript-JQuery | How to parse HTML textarea and input values from textboxes?

I am attempting to input text/variables the user has enetered into textboxes into certain words that already exist in the text area. An XML file has been pulled into the textarea so I'm wanting to modify certain keywords.
How can I do this? This is all going to be done locally. The browser pulls a file selected by user into text area, and then text fields modify this text area.
you want to change the text in the textarea based in the text in another input, so this is what i could do at glance with jquery
$('#input').change(function(event) {
var newText = $('#textarea').val().replace(/textToReplace/g, $(this).val())
$('#textarea').val(newText)
}
You listen to the change event in the inputs that contain the words you want to replace, and then change the textarea value after replacing that words in the current text.

Send keycode as input to another textarea

I have two textarea elements. I want to mirror the input given to one text area which has focus to another textarea. Please note that this is not equivalent to copying the values, since one textarea may already have some input which I do not want to copied. Thus only the input given to text area should be forwarded onto second textarea.
Something on the lines of:
$('#textarea1').keyDown(function(e) {
textarea2.sendCommand(e.keyCode)
});
Is something like this available in javascript?

Is it possible to restrict the range of select all/Ctrl+A?

I am working on a website where I would like to be able to display a box containing syntax-highlighted source code for the user to copy. When I click on the box, giving it focus (Chrome shows its focus outline), and type Ctrl+A, the text of the entire page is selected, whereas I would like only the syntax-highlighted source code within the box to be selected.
Is it possible to restrict the range of select all/Ctrl+A to only the text within the box, preferably without using an <iframe>?
My first thought was to try contenteditable. When I click in the box and the editor caret appears, typing Ctrl+A selects only the text within the box, as desired, but it also allows the user to change the code, and I think that the editor-interface aspect of making the box contenteditable will be confusing to users. If I wrap the source code text within a <div> having contenteditable="false" within the <div> having contenteditable="true", then the source code text is read-only, but typing Ctrl+A selects the text of the entire page again.
Here is a test page: http://jsfiddle.net/5crgL/
You can use the document.createRange(); method to select the text from a particular element.
and to handle the ctrl+a you can use the jQuery keydown method and can call the JS code to select the DIV text.
var range = document.createRange();
range.selectNode(document.getElementById(containerid));
window.getSelection().addRange(range);
please see jsfiddle here jsfiddle.

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