Focusing on a textarea after dynamically editing textarea text - javascript

I have a textarea and everytime a 'keyup' is detected it sets the current value of the textarea to the textareas text. Reason is, so that this text becomes a part of the HTML and I can then use localStorage to save the inputted text.
my code so far...
$(document).on('keyup', '.note_text', function () {
var text = $(this).val();
$(this).text(text);
});
My issue is, as soon as the keyup is detected the text area is no longer in focus so you have to click back into it and type again, and obviously you can only hold keys down to continuously type, as if you type normally the function is triggered by the key up.
I'm using $(document) as the textarea is dynamically created into the DOM

Add this, as explained in the jQuery documentation:
$("textarea").trigger("focus");
Which would be the same as the following without jQuery:
document.querySelector('textarea').focus();
Both of these examples are assuming that your html only contains one textarea. Otherwise you'd have to add logic to select the correct one.

After trial and error, I managed to find a working solution...
$(document).on('keyup', '.className', function () {
var text = $(this).val(); // Gets the text of the textarea being typed in
$(this).html(text); // Set the text as part of the html of the textarea
$(this).focus(); // refocuses back on the text area so the user can type
save(); // saves the DOM to the localStorage
});

Related

Jquery event click html() only works once

I have a function that when clicking on the element should enter a textarea value, but the function works only by clicking once and then does not work anymore, unless loading the page. How to make the function work every time I click on the element?
I made the function in javascript, but this only works in Firefox and does not work in chrome, so I gave up and tried jquery
$("#element").click(function(){
$("#nameidtextarea").html("<br>");
});
It was expected that when clicking on #element the value "<'br'>" will be inserted into the textarea
The HTML content of a textarea element is the default value, so using it will only change the value if it hasn't been changed by the user.
Do not use html() to modify the value of a form control. Use val().
You are currently setting the value to <br>. That's a replace action, not an insert action.
If you want to insert the data and not erase the existing data, then you will need to read the current value, modify it, then set the new value back.
$("#element").click(function(){
const old_value = $("#nameidtextarea").val();
const new_value = old_value + "<br>";
$("#nameidtextarea").val(new_value);
});

Chrome extension - remove default text from forms using jQuery

I'm developing a Chrome extension, and I want to be able to insert saved data back into forms. In certain forms, some of the input elements will have default text. The problem I'm having is when I try to insert data into the form, the text retains the same class as if it was default text, and I want the text to appear as if a user entered it themselves. I tried triggering the 'focus' event for input elements with the following code:
valueInputs = ["input[type='text']", 'select', 'textarea'];
valueInputs.forEach(function(tag) {
$('form').find(tag).each(function (index, elem) {
if(tag != 'select') {
$(this).focus()
}
$(this).val(data[$(this).attr('name')]);
});
});
The code doesn't work for my extension, but does work when I type it in the console. Any suggestions on how to get it to run?
Update: I've figured out that after clicking a button in my popup to fill in the data, the data is filled in but nothing is focused on until I click the browser. Then it will trigger 'focus' only on the last input element. I want to be triggering the event for all input elements, and to fill in data after the element is focused on.

how to auto populate text fields with text automatically

I have a simple Registration form and I want to make an option like there are two different fields, and what i want is simple, just when I add text to the first field it should automatically be added the same content to the next field.
$("#field1").change(function(){
$("#field2").val(this.value);
});
Demo: http://jsfiddle.net/DerekL/CcDv4/
$(function(){
$('#txt1').on('change', function(e){
$('#txt2').val($(this).val());
});
});​
DEMO.
The change event only fires when 2 conditions are met:
The element loses focus;
The element has a different value property than when it got focus.
If you want the text to change as you type it, you can use jQuery together with the HTML5 input event:
//assuming `a` and `b` as text field IDs
$('#a').on('input', function() {
$('#b').val($(this).val());
});​
JSFiddle
For non-HTML5 browsers, you can just extend the events map to simulate the input event:
$('#a').on('input keydown keypress keyup change blur', function() {
$('#b').val($(this).val());
});​
JSFiddle
Give onchange event for first field and assign value for second field,as below
onchange="secondfieldname.value=firstfieldnamefieldname.value"

input text event is not triggered when updated using DOM

I am having an issue trying to trigger the test() function when updating the input of type text "testName" using the DOM. Does it have something to do with the DOM itself? It works when I am directly clicking on the input of type text and modify it, but not when another JS function access it through DOM to modify it.
document.getElementById('testID').value = "test";
Thank you
If you need to trigger the onchange event your code has to be like shown below
document.getElementById('testID').value = "test";
document.getElementById('testID').onchange();
Hope this solves your problem.
unlike a text field, a text area has no value that gets populated. make a div with id="testID" inside the text area and use that instead.
document.getElementById("testID").innerHTML="New text!";
if it is a text field, then your code should owrk
document.getElementById('testID').value = "something";
what are you using to trigger the event? onclick? onchange? what's it related to

jQuery Change event for input and select elements

I am trying to alert something whenever a drop-down box changes and whenever something is typed into an input. I don't think I can use change for input fields? What would you use for input fields? Also, what about input fields of type file? Same thing. Here is what I have so far and it's not working:
$('input#wrapper, select#wrapper').change(function(){
alert('You changed.');
});
You can bind a keypress event to the text box.
$("#wrappertext").bind("keypress", function(){
// your code
});
In your sample you have used the same id for the text box and the select box. Change this also.
when ever something is typed into an
input
change() happens in input type text happens when the value is change on blur...
try keyup() or keydown() instead.

Categories