Me gustaría hacer una entrada de una longitud fija que solo pueda completar algunos de los caracteres, por ejemplo, digamos que tengo __llo w_rld! y quiero que el usuario complete los espacios en blanco, pero no permita modificar los caracteres precargados.
Pensé en usar una etiqueta de entrada para cada carácter y marcar como deshabilitados los precargados, aquí hay un ejemplo:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Example</title> </head> <body> <input size="1"></input> <input size="1"></input> <input size="1" value="l" disabled></input> <input size="1" value="l" disabled></input> <input size="1" value="o" disabled></input>   <input size="1" value="w" disabled></input> <input size="1"></input> <input size="1" value="r" disabled></input> <input size="1" value="l" disabled></input> <input size="1" value="d" disabled></input> <input size="1" value="!" disabled></input> </body> </html>Sin embargo, este enfoque no permite que el usuario siga escribiendo caracteres y salte de una entrada a la siguiente.
¿Hay alguna manera de lograr esto?
El uso de required y querySelector(':invalid') parece funcionar bastante bien.
Por cierto, no es html válido para finalizar las etiquetas <input> .
const container = document.getElementById("container"); container.addEventListener("input", ev => { container.querySelector("input:invalid")?.focus(); }); input { width: 1em; } <div id="container"> <input required maxlength="1"> <input required maxlength="1"> <input value="l" disabled> <input value="l" disabled> <input value="o" disabled>   <input value="w" disabled> <input required maxlength="1"> <input value="r" disabled> <input value="l" disabled> <input value="d" disabled> <input value="!" disabled> </div>Si entiendo bien, los cuadros de texto de un carácter de largo son una alternativa, ¿no es lo que realmente quieres? Si es así, puede usar una expresión regular para rechazar cualquier cosa que no coincida. Para hacerlo usas un . para cada carácter que está dejando en blanco y el carácter para cada uno que desea corregir. La expresión regular para su ejemplo de hola mundo es /..llo w.rld!/ y revierte el valor del campo a la última versión que pasó esta prueba cada vez que falla. Técnicamente, pueden editar esos caracteres, pero el código los cambiará inmediatamente después:
let lastValue = '__llo w_rld!'; let currentValue = '__llo w_rld!'; const regex = new RegExp('..llo w.rld!'); testTextID.value = lastValue; const strLength = 12; function overwriteTestText(e){ let caretpos = testTextID.selectionStart; currentValue = testTextID.value; if (currentValue.length == strLength + 1){ currentValue = removeCharacter(currentValue, caretpos); } testText(e, false); //selecting 0 characters long puts the caret at that position. testTextID.setSelectionRange(caretpos, caretpos); } function testText(e, readInput = true){ if(readInput) { currentValue = testTextID.value; } if (regex.test(currentValue) && currentValue.length == strLength) { lastValue = currentValue; } testTextID.value = lastValue; } function removeCharacter(str, pos) { return str.slice(0,pos) + str.slice(pos+1); } <input id="testTextID" onkeyup="overwriteTestText()" onblur="testText()" />