Develop Reference

How can I clear 2 textareas by erasing the text on the first one using JavaScript?

When I write "hola" and click on "encrypt" the result is shown in a second textarea. ¿Is there any way of clearing the text of the 2nd text area only by erasing the text in the 1st one?
I've found I can create a button but there must be a solution without creating it.

You can always use the onChange() in the first text area like
<textarea id="1" onChange="eraseSec" />
<textarea id="2" />
<script>
function eraseSec(){
x = getelementbyid(1)
y = getelementbyid(2)
if (x.value == ""){
y.value = ""
}
}
</script>
This way when you clean the first textarea the second one will be erased
Hope it helps

use Onchange() on your textarea and set it to empty if other textarea have value.

What portion of input field is occupied by the text?

I am trying to make a auto (height) increasing text field. So I need to know when to increase the height of the input field. For that I need to know if the text has already filled the input field or not. Is there a way for this ?

If it can be useful, a quick solution with a textArea is the next one:
Javascript:
function resizeText(){
var cont = document.getElementById("mytext");
while (cont.scrollHeight == cont.clientHeight)
cont.rows--;
while (cont.scrollHeight > cont.clientHeight)
cont.rows++;
}
HTML:
<textarea id="mytext" rows="1" cols="30" onkeypress="resizeText()">
write here your text.
</textarea>

Get selected text in an input box

Is it possible to get the selected text in an input box of a website, using either jQuery or vanilla JavaScript?
I have tried with var selectedText = window.getSelection().toString();,
but this code only gets the text in a paragraph and not in an input box.
EDIT: Maybe I was unclear, I want to get the text from a website that I didn't create. I'm building a Chrome extension and I need to get the text from an input box of a website.

Here is a solution:
function showSelectedText() {
var input = document.getElementById('text');
var selection = text.value.substring(input.selectionStart, input.selectionEnd);
alert(selection);
}
<input id="text" value="Hello, how are you?"><br>
<button onclick="showSelectedText()">Show selected text</button>

If you don't mind using jQuery plugins you can accomplish that by using this one http://madapaja.github.io/jquery.selection/
It's flexible (You can use it both for inputs and for paragraphs)

Remove textarea border on button click and select next textarea automatically

I don't have idea how to do this, although I've seen it on numerouse websites. So, it is obviously an easy code, but I got stuck.
I create a simple app that displays textarea and a button. When you click the button, it adds one more textarea below. Therefore, I want to remove the frame (border) of the previous textarea when you click the add button. And also, to automatically select the next one for typing.
CLARIFICATION: User types in textarea some text, and presses the red button. It becomes green. And the border of the first textarea disapears (only text remains) and the added textarea below is automatically selected (clicked) and user can type in the text and again press the red button and so on. If user decide to return and change the text of previous textarea, the border will appear again.
THERE IS THE FIDDLE
And here is the code:
<textarea rows="3" cols="30" ></textarea><br/>
<input type="button" style="background-color:red;width:48x;height:20px;" id="btn1" value="ADD" onClick="change(this);addmore();">
<div id="inner"></div><br/>
function change(myinput) {
myinput.style.backgroundColor = "green";
}
function addmore() {
var textarea = document.createElement("textarea");
textarea.rows = 3;
textarea.cols = 30;
var div = document.createElement("div");
div.innerHTML = textarea.outerHTML + '<br/><input type="button" style="background-color:red;width:48px;height:20px;" id="btn2" value="ADD" onClick="change(this);addmore();"><br/>';
document.getElementById("inner").appendChild(div);
}

Making a text box read only after some data is fetched into it

I Have a text box and a control button next to it.Clicking on the button will call another function where some data is selected and written back to the text box.Currently my text box is editable by the user after the data is fetched to the text box.I want to make the text box read only after the user clicks on the button and fetches the data to the text box,So that now the data is present in the text box which cannot be edited.If the user has to change the data,the user has to again click on the button to call the function which will help us over write the data in the text box.How can I accomplish this in javascript.

you can do it like this
HTML:
<input type="text" id="mytextbox" value="click the button below."/>
<input type="button" value="click" onclick="changeText();"/>
Javascript:
function changeText(){
var text_box = document.getElementById('mytextbox');
if(text_box.hasAttribute('readonly')){
text_box.value = "This text box is editable.";
text_box.removeAttribute('readonly');
}else{
text_box.value = "This text box is read only.";
text_box.setAttribute('readonly', 'readonly');
}
}
fiddle example: http://jsfiddle.net/b7jAy/

you can use jQuery .attr() function to set the readonly status of the text field.
$('#textfield').attr('readonly', true);
$('#textfield').attr('readonly', 'readonly');

Please try with JQuery. Thousands of reasons to use it as Javascript framework. Here is a response to your question:
Add "readonly" to <input > (jQuery)
Hope that helps,

Assign an id attribute to the text box, say <input id=foo>, and use
document.getElementById('foo').readOnly = true;