Develop Reference

Is there a way to copy validation from one input to another with JavaScript?

I have a client who wants me to punctuate all currency inputs with commas and dollar signs. This means that I have to use a text input instead of a number input, which means that I cannot take advantage of the inbuilt validation that number inputs have, chiefly min, max, step, and simply validating that what the user enters is in fact a numeric string. My idea is therefore to create a text input copy of the actual numeric input, hide the actual one, format the contents of the text input as the user types, and copy them over into the hidden numeric input so that they can be validated and submitted from there. What is the best way with javascript to display any validation errors that might pop up from the hidden number input? I am specifically looking at the constraint validation api:
https://developer.mozilla.org/en-US/docs/Web/API/Constraint_validation
Here's the example html:
<!-- hidden actual input field -->
<input id="real" name="cost" type="number" min="0" max="1000" step=".01" style="display:none;" />
<!-- visible, fake, punctuated input field -->
<input id="punctuated" type="text" />
So I am wanting to find a way to take any validation objects in the DOM for the first input and copy them over to the 2nd. I have tried this so far (see below), but it appears that the validity and validationMessage DOM properties are readonly:
var punctuated = document.getElementById('punctuated');
var real = document.getElementById('real');
punctuated.validationMessage = real.validationMessage;
punctuated.validity = real.validity;

First option: To add the same class to both inputs and use document.getElementsByClassName('some-class')
Second option: To use a single input and on (keyup) call the validation function which will check if the user input matches the regex you need

This appears to be the answer:
punctuated.setCustomValidity(real.validationMessage);
I just bound that to the page load, and a click and keyup event for the punctuated input, and it seems to work. So when the user types stuff into the punctuated input, it gets copied over to the real input and validated using the html attributes, and then the click and keyup events pass the validation message to the punctuated input.

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>

How to get Next button on android softkeyboard in place of Go Button in phonegap

I am developing Phonegap application and have many inputs in application form. I am getting Go button on keyboard of android.I want to replace go button with next button. As clicking on Go button (as shown in image) submits form.
In android native we can specify next button in XML but for Phonegap how to specify next button in place of go button.?
Some Samsung devices have by default Next Prev button on top.
By Default there is Go button. I need Next but in Phonegap. is there any plugin for specifying that for android.

Having a "Next" button instead of "Go" is not possible with Android as of now.
Android will always display "Go" button for form input fields. "Go" is basically reflecting the same behavior as of an "Enter" button on a normal browser & keyboard. You can achieve through below code:
if (event.keyCode == 13) {
//Handling "Go" Button to move to next input field
}
OR
If your input fields are more, then data-dependency will be best solution.
If you want to prevent users from submitting the form, you can put required validations on the form using javascript, where you can specify data-dependency inside input field with required, which helps move cursor to a particular field which you specified in data-dependency.
<input type="text" id="first" data-dependency="second" />
<input type="text" id="second" data-dependency="third" />
<input type="text" id="third" />
It move focus to next fields in form until its your last field. Once last field reaches you can allow it to act as enter. So basically Go will keep moving focus to next fields until its your last field & then will submit the form.

Its been said that if have input fields without or outside the form tag means you will get next button as tab button
As far as i know there is no proper solution to get next button instead of go . There are only workarounds do it. Most common one is to capture the 'Go' button as enter key(keycode '13') in javascript and do your thing.
$('selector').on("keydown",function(event){
if (event.keyCode == 9) {
//you got tab i.e "NEXT" Btn
}
if (event.keyCode == 13) {
//you got enter i.e "GO" Btn
}
});
for tab button instead of enter
There has been also sources that already discusses these GO Vs NEXT button

have you tried the attribute enterkeyhint
The enterKeyHint property is an enumerated property defining what action label (or icon) to present for the enter key on virtual keyboards. It reflects the enterkeyhint HTML global attribute and is an enumerated property, only accepting the following values as a DOMString:
'enter' typically indicating inserting a new line.
'done' typically meaning there is nothing more to input and the input method editor (IME) will be closed.
'go' typically meaning to take the user to the target of the text they typed.
'next' typically taking the user to the next field that will accept text.
'previous' typically taking the user to the previous field that will accept text.
'search' typically taking the user to the results of searching for the text they have typed.
'send' typically delivering the text to its target.
If no enterKeyHint value has been specified or if it was set to a different value than the allowed ones, it will return an empty string.
The enterKeyHint property is an enumerated property defining what action label (or icon) to present for the enter key on virtual keyboards. It reflects the enterKeyHint HTML global attribute and is an enumerated property, only accepting the following values as a DOMString:
<main>
<h2>Using the <code>enterkeyhint</code> Attribute</h2>
<p>View this demo on a mobile device. Note the text in the "enter" key on your mobile device's virtual keyboard.</p>
<input type="text" enterkeyhint="Next">
</main>

You can simply use the following logic to let users focus on the next input field. This is a better approach, which I used in my one of the PhoneGap applications, as currently there are no 3rd party plugins which offer such functionality.
x$('#input1').on('keyup', function(e) {
var mEvent = e || window.event;
var mPressed = mEvent.keyCode || mEvent.which;
if (mPressed == 13) {
// On enter, go to next input field
document.getElementById('input2').focus();
}
return true;
});

For whom this may be of use:
I'm working on a react pwa and I was having issues getting the next button to show so users could move from one input element to the next (within the same screen). It turns out that android requires a <form> to be wrapping the input text elements. I did a series of tests:
input texts inside a (no tabindex, no attributes other than type, nothing)
input texts outside a (same as above)
input texts inside a inside a
input texts inside a outside a
Only those inputs inside a get android's default next-next-next-go behaviour where go = last input in the form.

Have you tried using the tabindex parameter on your input fields?
The default action of the keyboard should be to show next if tabindex is detected.
Example:
<input name="first" tabindex="1" /> //should show next
<input name="second" tabindex="2" /> //should show next
<input name="third" tabindex="3" /> //should show go

EditText android:imeOptions= "actionNext"

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.

How to take control/cursor to another text box

I have a page where you enter customer-id first and hit submit. That point it will validate the customer and if valid, comes back to the same page to enter quote number. Initially quotenumber field will be grayed out and can not be edited. My question is, after it comes back to the page, I need the cursor to go to the "quote number" text box instead of customer-id text box (currently it goes to customer-id text box). How can I solve this?

use javascript's focus() function or jQuery

in jquery it would be
$("#myinput").focus();