Develop Reference

Is it possible to track events on clicking on the number buttons on a readonly input?

A readonly number input (<input type="number" readonly/>) can't be changed when a user clicks on the little up&down buttons. However, is there an event or some other trick to listen to events in JS when the user clicks on these buttons?
I understand it's possible to manually create these buttons as standalone elements near the input, but the input will lose its "number" powers

The field It still listens to clicks - Chrome does not show the buttons when readonly
Why do you even keep it number? If it is readonly?
document.querySelector("[type=number][readonly]").addEventListener("click",() => console.log("clicked the readonly"))
<input type="number" readonly/>
Discussion here
Detecting number input spinner click

How to make an input a default input field of a view?

In the Angular app there are multiple views that have various inputs. When the user goes into a view, he needs to click the input field to type in the value. On a mobile device it is expected behaviour since the user would have to open keyboard widget to type in, so it is good he needs to click the field to type data in. But on a computer there is no need for a keyboard widget to open. User can type straight away. My question is: how to make a input field "default", so that when the user starts typing on a computer (or any other device with keyboard) the "default" input field will focus and fetch the incoming typed in string? Something like:
<input defaultInputOfAView="true"></input>

You can use autofocus to achieve it.
<input defaultInputOfAView="true" autofocus></input>

There is also a very nice solution (besides autofocus that triggers only once):
<div>
<input #myInputRef>
{{myInputRef.focus()}}
</div>

Mobile numeric keyboard [0-9] in textarea

Is it possible to open up the mobile numeric keyboard in a textarea box?
The typical pattern="[0-9]*" does not seem to work with a textarea and I can't find any other information on this anywhere else. I am trying to get this working in an angular app, so is there some way to preventDefault() on the default keyboard and somehow trigger the numeric keyboard?
e.g.
<textarea id="searchBox" pattern="[0-9]*" ng-model="searchParams.searchString" rows="3" ng-blur="formatSearch()"></textarea>

Unfortunately this is not yet possible for textarea. I have searched exhaustively on this and tried many varietions of pattern and types and so on but it just is not supported for textarea.
There are two possible solutions, either you can create your own html5 custom soft keyboard and apply a trick not to open the default keyboard.
Or (more elegant I think) use a normal input with type number or type tel and attach an onkeyup listerer. When enter is pressed, you process the line into your textarea and clean plus refocus the input.

isn't possible use input?
like
<input name="numbers" type="tel">
and than style the input like a textarea.
i dont have any idea for the textarea.

You can use the global attribute inputmode in textarea to alter Android or iPhone keypad.
<textarea inputmode="numeric"></textarea>
MDN Web Docs:
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode

A textarea can be validated via php but not in html. Below is my way of validating textarea,
$value=$_POST['value from textarea']
if(preg_match("/^[A-Za-z0-9]+$/", $value != 1) {
echo"oops";
} else {
echo "success";
}

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"

IPad Disable keyevent on input

I am working on a solution that implements adding text to textboxes but I disable the normal key events and use a custom one. I disable the key event like this:
<input onkeypress="return false;" onkeydown="return false;" onkeyup="return false;" type="text">
Now this works fine on browsers(Safari, Firefox, IE) but it fails to do so on the IPad's Safari and when a user press a key, it is entered twice. Is there another way to disable key events on the input field for the ipad?

Maybe you can make the textbox completely transparent (alpha:0), place it inside a div, and add the text to the div behind the textbox.

I figured it out. Basically if you are going to customize key entry, you have to customize it on the key up and not the key down or key pressed in Javascript.