Develop Reference

Is there a wat to style just the user input text in a <input type ="text"> not the input field itself?

I am using Cordova to make an android app and I have a text field where the user types into. Im using a keyboard function so I can listen for the done key on a text field. When the event fires I want to be able to "animate" the text that was just entered into the field. I don't necessarily want to animate it, but really just put a circular box around the text so that its clear the input has been accepted.
For example:
This is what it looks like after they've typed their text and before they've pressed done on the keyboard.
Text input before submit
When the event fires I want to style the text as such where the font weight changes and the background of the text gets bubbled. Is this possible?
Text input after submit

In the function that you're using to listen for the done key, you can use Element.classList.add() to add a class to the <input type="text"> element.
const inputElement = document.getElementById('your-input-element')
inputElement.classList.add('recipent-submitted')
Then apply whatever styling you want to .recipent-submitted in your CSS file.

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.

How to directly display the value of input

I'm currently working on a simple page that shows the current time and date. I want to create an input where you can fill in your name, so the page says "Hi there, (your name)"
On previous project I worked with this similar function, I had to create a form and on submit I could get the value. Since this is a very simple page I want to create a simple function, is there actually a way to get the value of the input without creating a form?
See image: Jason is filled in, the input goes away and it says "Hi there, Jason"

That's simple javascript, just select the input and then get its value
var input = document.getElementById('idFromInput');
alert(input.value);

Say you've got a paragraph tag <p id="para">text to replace</p>, and you want to replace the contents of that tag with the contents of a textbox <input type="text" id="textbox" />. You would just write a JS function like the one below, which could be triggered by something like hitting the enter key or a button.
You can expand this to do stuff like putting the textbox in a div and replacing the entire div with the contents of the textbox if you'd like the input field to disappear.
function replacePara() {
let replacementText = document.getElementById("textbox").value;
document.getElementById("para").innerHTML = replacementText;
}
<input type="text" id="textbox" />
<p id="para">text to replace</p>
<button onclick="replacePara()">press me</button>

TEXT INPUT BOX: how to display placeholder at the end of the typed text?

So... I have a list of input boxes in my form... no labels, just placeholder texts.
lets say I have a text input field for an email...
and that the value of this text is ruby#rails.com
I would like to display: (email) after that string...
(only when input is blured, when input is focused, than the label shouldn't be there)...this I know how to do it...
the only problem is, that I don't know how to calculate the witdh of the actual text inside the input box, so I can display the label right beside it (another element positioned absolutely of course)
Any ideas?
==========================================================
edit
so, I am using something like this in html markup
<input type="text" name="my_field" value="" data-fixed-placeholder="(email)" placeholder="email">
and then I am using jQuery to check if data fixed-placeholder is present... and display it...
so something like this (just semantically... the code is obviously not like that)
$("[data-fixed-placeholder]").on("focus", function(e){
//hide the fixed placeholder
}).on("blur", function(e){
//show the palceholder
//1. check if there is no text inside... then don't show it (the original placeholder is still visible)
//2. if there is text, calculate how wide it is
//3. wrap input box in div, make it position relative, append another div inside with the text from fixed-placeholder
//4. position this text next to the actual text in the input box
});
Hope this helps you to help me better.

setting text in textarea using javascript

I am trying to process the text in textarea [on Facebook group page. 'write post' has one text area] and replace it with new text. This is done using Greasemonkey script
textHolder = document.getElementsByClassName( "uiTextareaAutogrow input mentionsTextarea textInput" )[0];
var vntext=textHolder.value;
var vn2text=Encrypt(vntext);
textHolder.value=vn2text;
So new text is seen in text-area but the when the 'post' button is clicked the new text is not taken instead old text is posted
But if we manually insert at least a character to the processed text then the resulting text is posted after click on post button. So I am not getting why it is directly not taking the new text without inserting the text manually.
There are other events being called in textarea element, but I do not know what they are doing exactly.
So what should be done so that new text will be posted?
DOM for text-area on Facebook page is as follows:
<textarea
class="uiTextareaAutogrow input mentionsTextarea textInput DOMControl_placeholder"
title="Write something..." name="xhpc_message_text" placeholder="Write something..."
onfocus="return wait_for_load(this, event, function() {if (!this._has_control) { new TextAreaControl(this).setAutogrow(true); this._has_control = true; } return wait_for_load(this, event, function() {JSCC.get('j4ef51acb72eb241587530255').init(JSCC.get('j4ef51acb72eb241587530256'));;JSCC.get('j4ef51acb72eb241587530256').init(["buildBestAvailableNames","hoistFriends"]);JSCC.get('j4ef51acb72eb241587530253').init({"max":10}, null, JSCC.get('j4ef51acb72eb241587530255'));;;});});"
autocomplete="off" style="direction: ltr; "
>
Write something...
</textarea>

Can you link to the page in question?
That page could be tracking that textarea's value in JS or even AJAX-posting it with every keystroke. Clicking the 'post' button might merely tell the page/server to use the last saved version of the text.
Since the GM script changes the textarea value independently of mouse and focus events, the page and/or server tracking mechanism won't be triggered.
So, if you can, find the appropriate JS function and call it after changing the text.
If that's too difficult, try setting the focus to the textarea, then elsewhere and then back to the textarea.
Or try sending a keystroke event to the text area.
Link to the page, or a full-code snapshot of it, for more detailed help.