Develop Reference

How can I force a user to fill in input fields successively?

I am looking to create an input form that will force a user to enter something in each field successively before moving onto the next input or submitting. This is something that would be filled out by someone on a phone who is asking questions that are attached to each input field and recording the answer in the inputs. Thus to prevent someone from skipping/missing a question while on the phone, I want to require that each input field is filled out successively. For this reason, the HTML 'required' attribute does not necessarily work as it will only prevent submission if a field is not filled out.
Previously I have given each required input its own submit button, but this looks horrible and can be confusing for those who use it. What is the best way to achieve what I am looking do to using a combination of html, js, node, and/or ejs?

Give each input a change event handler that makes the next input visible:
// Get all the labels into a node list
const labels = document.querySelectorAll("label");
// Get a reference to the last label
const lastLabel = labels[labels.length-1];
// Get a reference to a verification element
const output = document.querySelector("div.hidden");
// Use event delegation to handle all change events
document.addEventListener("change", function(event){
// Get reference to the parent label of the changed element
const lbl = event.target.closest("label");
// Check to see if it's an element we care to handle
if(lbl.classList.contains("response")){
// Hide the changed label (and it's child input)
lbl.classList.add("hidden");
// Unhide the next label (and it's input child)
lbl.nextElementSibling.classList.remove("hidden");
}
// If the current label was the last one
if(lbl === lastLabel){
// Show the verification field
output.classList.remove("hidden")
}
});
.hidden { display:none; }
<label class="response">#1<input ></label>
<label class="response hidden">#2<input ></label>
<label class="response hidden">#3<input ></label>
<div class="hidden">DONE!</div>

HTML input - Replace selected value by typing

I have the below input that the user can first click to enable (button1), type the desired new value, and finally save it (button2).
<input class="form-control inputUserValue" onkeypress="return contoso.isNumberKey(this, event,3);"
data-default_value="10,00" value="10,00" disabled="">
The issue: after the field is enabled, the user has first to erase the input content with delete or backspace at keyboard (including when the content is already selected) and then start typing the new value at the blank input field. So, the user can't simply use the mouse to select and just type the new value. This behaviour also occurs at other sections of the software when the input is text.
The idea is to improve the user experience by making it possible to just type the desired new value after button1 pressed, replacing existing and displayed content. The existing text/value should still be displayed, but already selected and ready to be replaced if the user types, or the user may want to deselect and make same minor adjust at the existing text/value.
We've tried onclick="this.select();" when button1 pressed, but still we couldn't type the new value without delete or backspace first.
Can anyone help on how to achieve this?
The HTML is generated and managed with JS. The input is whitin a table-responsive. Our system is designed to work on Chrome.

You were on the right way to use the select() method, but you first need to focus() the input:
usrinput.focus();
usrinput.select();
Working example: (for input type text)
const usrinput = document.querySelector('input');
document.querySelector('#button1').addEventListener('click', function() {
usrinput.disabled = false;
usrinput.focus();
usrinput.select();
});
<button id="button1">enable</button>
<input type="text" value="10,00" disabled>
<button id="button2">Save</button>
Working example: (for input type number)
const usrinput = document.querySelector('input');
document.querySelector('#button1').addEventListener('click', function() {
usrinput.disabled = false;
usrinput.focus();
usrinput.select();
});
<button id="button1">enable</button>
<input type="number" value="10" disabled>
<button id="button2">Save</button>

javascript - hide mobile default keyboard but keep input field active

In HTML/CSS/JS I would like to be able to hide the default keyboard on mobile from the screen when an input field gets focus.
The situation is this: I have a web solution on a handheld device (Android 5+, running something based on Chromium) with a built-in 2D scanner - for reading barcodes.
Some fields should by default get input from scanning barcodes and I would very much like to hide the default keyboard that otherwise appear on screen. Then, if necessary, I would like to have some option of actually displaying the default keyboard anyway, for example by some button or selection on the page.
I have read the various suggestions to similar questions (mostly making the field readonly, but also the one about blurring the field right after it gets focus) but these do not work, as the scanner does not input anything into the field - it needs the field to have focus.

Thank you for the replies. As the consensus is that this is not possible I did a work-around that I am posting here:
The basic principle is to blur the input field and then capture the keypresses to add them to the input field anyway.
In this situation I am using a barcode scanner with all-numeric barcodes so that's what this will work with but if someone else should be interested it should be trivial to adapt to other situations:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$( document ).ready( function () {
// _input_fields and _scan_fields are jQuery objects with the relevant elements
let _input_fields = $("input[type=number], input[type=text], input:not([type]), select");
let _scan_fields = $("input[type=number].scanner");
// _ignore is set to true when a scannable field actually _should_ get focus
var _ignore = false;
// onfocus() for relevant input fields on page
_input_fields.focus(function(){
// only do something if scannable fields shouldn't actually get focus
if (!_ignore) {
// outer is the current input field that is getting focus
let outer = this;
// found is set to true if the current input field is scannable
let found = false;
// loop through all scannable fields to see if the current input field is one of them
_scan_fields.each(function(index) {
// inner is one of the scannable fields, possibly the current input field
let inner = this;
// _field stores the current input field _if_ it is scannable
var _field;
// only check (and potentially reset key capture) if we have not found the current
// input field to be one of the scannable fields (yet)
if (!found) {
// check if the current input field "outer" is the currently examined
// scannable field "inner"
if (inner == outer) {
// the current input field is one of the scannable fields
// immediately remove focus to disable mobile keyboard
inner.blur();
// remember which input field we have found and disable further checks
_field = inner;
found = true;
// remove any existing keycapture (might destroy existing functionality!!!)
$(document).off("keypress");
// capture keypresses and add numbers to the input field
$(document).keypress(function(event){
var _field = inner;
let keynum = event.which;
if (keynum == 13) { // enter
// ignore or submit?
} else if ((keynum < 48) || (keynum > 57)) {
// not-a-number, ignore in this case
} else {
// a number, add to field value
$(_field).val($(_field).val() + String.fromCharCode(event.which));
}
});
} else {
// this is a regular field
// remove any existing keycapture (might destroy existing functionality!!!)
$(document).off("keypress");
}
}
});
}
});
// add a button after each scannable input field
$("input[type=number].scanner").after(function(){
return "<button class='descanner'>123</button>";
});
// if those buttons are pressed, the input field before them actually gets focus
// overriding the new behaviour
$("button.descanner").click(function(event){
// these buttons do not submit the form
event.preventDefault();
// remove any existing keycapture (might destroy existing functionality!!!)
$(document).off("keypress");
// set focus for the input field but make sure we don't catch this above
// also, clear content of input field
_ignore = true;
$(this).prev("input[type=number].scanner").val("").focus();
_ignore = false;
});
});
</script>
</head>
<body>
<form>
<input type="number" name="field1" class="" />
<input type="text" name="field2" class="" />
<input name="field3" class="" />
<select name="field4" class="">
<option value="bac">abc</option>
</select>
<input type="number" name="field5" class="scanner" />
<input type="number" name="field6" class="" />
<input type="number" name="field7" class="scanner" />
</form>
</body>
</html>
The form has 7 fields and 2 of those have the desired functionality. To enable manual edit of those fields a button is added next to each of those 2 fields.
This has been tested in Chrome 55 and on a Zebra TC 51 with Webview updated to Chromium 55.

Define an Input element above and append CSS property which will
hide the soft keyboard to popping up.
Set Focus to make ready for
scanner input in the text field.
The last Step Turn Read-only mode off to input data.
yourInputVal = document.getElementById('myInputElement');
yourInputVal.readOnly = true;
yourInputVal.focus();
setTimeout(function(){
document.getElementById('myInputElement').readOnly = false;
},

This worked for me:
Add the inputmode="none" attribute to your input element.
<input type="text" id="manageBinsBinId" inputmode="none" >
Javascript/jquery:
$(function() {
$(document).on(`focus`,`input`,function() {
myEl=$(this);
setTimeout(function(){
myEl.attr(`inputmode`,``);
},1);
});
$(document).on(`blur`,`input`, function(){
$(this).attr(`inputmode`,`none`);
});
});

Force Text Caret To Appear In Readonly Input

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;">

Homemade "Captcha" System - One minor glitch in javascript, can't enable submit button

So basically what I'm trying to do as a measure of security (and a learning process) is to my own "Capthca" system. What happens is I have twenty "label's" (only one shown below for brevity), each with an ID between 1 and 20. My javascript randomly picks one of these ID's and makes that picture show up as the security code. Each label has its own value which corresponds to the text of the captcha image.
Also, I have the submit button initially disabled.
What I need help with is figuring out how to enable the submit button once someone types in the proper value that matches the value listed in the HTML label element.
I've posted the user input value and the ID's value and even when they match the javascript won't enable the submit button.
I feel like this is a really really simple addition/fix. Help would be much much appreciated!!!
HTML code
<div class="security">
<label class="captcha enabled" id="1" value="324n48nv"><img src="images/security/1.png"></label>
</div>
<div id="contact-div-captcha-input" class="contact-div" >
<input class="field" name="human" placeholder="Decrypt the image text here">
</div>
<input id="submit" type="submit" name="submit" value="Send the form" disabled>
Javascript code
//Picks random image
function pictureSelector() {
var number = (Math.round(Math.random() * 20));
//Prevents zero from being randomly selected which would return an error
if (number === 0) {
number = 1;
};
console.log(number);
//Set the ID variable to select which image gets enabled
pictureID = ("#" + number);
//If the siblings have a class of enabled, remove it
$(pictureID).siblings().removeClass("enabled");
//Add the disabled class to all of the sibling elements so that just the selected ID image is showing
$(pictureID).siblings().addClass("disabled");
//Remove the disabled class from the selected ID
$(pictureID).removeClass("disabled");
//Add the enabled class to the selected ID
$(pictureID).addClass("enabled");
};
//Calls the pictureSelector function
pictureSelector();
//Gets the value of the picture value
var pictureValue = $(pictureID).attr("value");
console.log(pictureValue);
//Gets the value of the security input box as the user presses the keys and stores it as the variable inputValue
$("#contact-div-captcha-input input").keyup(function(){
var inputValue = $("#contact-div-captcha-input input").val();
console.log(inputValue);
});
console.log($("#contact-div-captcha-input input").val());
//Checks to see if the two values match
function equalCheck() {
//If they match, remove the disabled attribute from the submit button
if ($(pictureValue) == $("#contact-div-captcha-input input").val()) {
$("#submit").removeAttr("disabled");
}
};
equalCheck();
UPDATE
Fiddle here
UPDATE #2
$("#contact-div-captcha-input input").keyup(function(){
var inputValue = $("#contact-div-captcha-input input").val();
console.log(inputValue);
if (pictureValue === inputValue) {
$("#inputsubmit").removeAttr("disabled");
}
});
So I got it working 99.9%, now the only problem is that if someone were to backspace or delete the correct value they have inputted, the submit button does not then change back to disabled. Any pointers?

Known issue.
Give your button a name OTHER THAN submit. That name interferes with the form's submit.
EDIT
A link was requested for this -- I don't have a link for pure JavaScript, but the jQuery docs do mention this issue:
http://api.jquery.com/submit/
Forms and their child elements should not use input names or ids that
conflict with properties of a form, such as submit, length, or method.
Name conflicts can cause confusing failures. For a complete list of
rules and to check your markup for these problems, see DOMLint.
EDIT 2
http://jsfiddle.net/m55asd0v/
You had the CSS and JavaScript sections reversed. That code never ran in JSFiddle.
You never re-called equalCheck. I added a call to your keyUp handler.
For some reason you wrapped pictureValue inside a jQuery object as $(pictureValue) which couldn't have possibly done what you wanted.
Basic debugging 101:
A console.log inside of your equalCheck would have shown you that function was only called once.
A console log checking the values you were comparing would have shown
that you had the wrong value.
Basic attention to the weird highlighting inside of JSFiddle would have shown you had the code sections in the wrong categories.