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>
Related
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.
I'm working on a website that has a text box to enter a price discount, and I want a percent to automatically be added to the input when someone puts a number into the text box. I'm sure this is really easy, but I'm new to Javascript and I haven't been able to find anything on SO.
<div>
<label for="discount">Enter discount</label>
<input type="text" name="discount" id="discount" oninput="addPercent()">
</div>
Thanks!
I would rather recommend you to have % as text next to the input field.
<div>
<label for="discount">Enter discount</label>
<input type="text" name="discount" id="discount" oninput="addPercent()">
<span class="percent">%</span>
</div>
If you still need to add it to the input field, I would recommend to add event listener on input blur.
You may need to have some extra validation as well for checking interger values of the input. Also, blur event fires once the focus is removed from the input. With keyup/keydown, there could be some chances that it will get into race condition if the user is typing values too fast in the input field.
document.getElementById('discount').addEventListener('blur', function() {
this.value = this.value.replace('%','')+'%'; //remove existing % and add again
});
<div>
<label for="discount">Enter discount</label>
<input type="text" name="discount" id="discount">
</div>
Just adding a "%" to the end of a text in an <input> might be adequate but filtering an <input> to accept only numbers and dots and then add a "%" is far better:
Bind input event to <input>
document.querySelector('input').oninput = function(e) { //...
Get the current value of <input> .replace() whatever isn't a number or dot with nothing. Then add a "%" to the end of the value.
this.value = this.value.replace(/[^\d\.]/g, '') + '%';
Next, get the end position of value
let end = this.value.length;
Then make a selection range that goes from end position to one character length back.
this.setSelectionRange(end, end-1);
Finally, set .focus() so that the cursor will always be right before the "%"
this.focus()
Are you sure that you'd want a "%" in the actual value? If you intend to process that value then it'll be an extra step just to remove it for calculating percentages.
document.querySelector('input').oninput = function(e) {
this.value = this.value.replace(/[^\d\.]/g, '') + '%';
let end = this.value.length;
this.setSelectionRange(end, end-1);
this.focus();
}
<input>
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)
So, I know how to detect when a user has changed the text on a input field (including typing, pasting, and other means)...
But for my purpose, I need to know exactly what was changed in the text field.
For example, initially, the text field contains this:
This is a text
Then the user changes it to this:
This is my text
The script should return this to me: text position from 8 to 9 was changed to my.
So is there an easier way to do this without having to use a difference checker algorithm? Because it seems that if I put an event for keyup, I can detect what position was changed or deleted, but this won't detect the whole text pasted from Ctr+V. Anyways, I need a fast way to send the differences in a text to synchronize it with the database on the server using AJAX, kinda like Google Docs, but I feel like resending the whole text field every so on and then is very inefficient, mainly because the user may be editing a very large text field.
Try this:
<script>
$(document).ready(function(){
var inival=$("#myinput").val();
$("#check").click(function(){
$("#log").empty();
var newval=$.trim($("#myinput").val());
var splitval=newval.split(' ');
for(var i=0; i<splitval.length; i++){
if(inival.indexOf(splitval[i])<0){
var charindex=newval.indexOf(splitval[i]);
$("#log").append('text position from '+charindex+' to '+(charindex+1)+'
was changed to '+splitval[i]+'<br>');
}
}
});
});
</script>
<input type="text" value="This is a text" id="myinput"><input type="button"
value="Check" id="check"><br>
<div id="log"></div>
jsfiddle
Scenario: When an input field is set .readOnly = true, the text cursor is replaced with the pointer arrow cursor and the input field cannot be entered or modified. However, clicking into such a readonly input field with text in it does actually register the cursor's location within the text, even though the display does not show the clicked location by visually rendering a text cursor caret, like a read-enabled input field would.
Here's the question: Is there a way to force the text cursor caret to appear in an input field set .readOnly = true, in other words, as if the input field were actually read enabled, but still keep the input field readonly?
What you want to achieve is actually an existing bug in few browsers.
Check this answer
But you can achieve this by below workaround.
Remove readOnly attribute and try with below code
$('document').ready(function() {
$('input[type="text"]').keydown(function(e) {
return false;
});
$('input[type="text"]').bind("cut copy paste", function(e) {
e.preventDefault();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" value="some value" />
You can do this with css :
input[readonly] {
cursor: text;
}
or
<input type="text" style="cursor: text;">