/////INPUTS/////////////////////////////////////////////////
//INGRESAR CUANDOS DIGITOS QUERES QUE SE COLOREEN AL INICIO
var digitosInciales=5
//INGRESAR DE QUE COLOR SE DEBERIAN PINTAR
var color="33ff33"
////////////////////////////////////////////////////////////
var input = document.getElementById("input")
input.addEventListener ("input", ()=>{
var [di,co]=document.getElementsByClassName("agregar")
if(!isNaN(di.value)&&co.value.length>0)
{
digitosInciales=di.value
color=co.value
}
let lengthInput=input.innerText.length-1
if (lengthInput>digitosInciales-1){
let textoColor=colorearText(0,digitosInciales-1,color,input.innerText)
input.innerHTML=textoColor
if(lengthInput>=digitosInciales)setCursorToEnd(otros)
}
else if (lengthInput>=0){
let textoColor=colorearText(0,lengthInput,color,input.innerText)
input.innerHTML=textoColor
setCursorToEnd(input)
}
})
/////////////////////////////////////////////////////////////
function colorearText(indiceIzq,indiceDer,color,texto){
let txtAr=texto.split("")
txtAr[indiceIzq]=`<span id="cincoDigitos" style="color:#${color}">${txtAr[indiceIzq]}`
txtAr[indiceDer]=`${txtAr[indiceDer]}</span ><span id="otros">`
return txtAr.join("")+"</span>"
}
//////////////////////////////////////////////////////////////
function setCursorToEnd(ele)
{
var range = document.createRange();
var sel = window.getSelection();
range.setStart(ele, 1);
range.collapse(true);
sel.removeAllRanges();
sel.addRange(range);
ele.focus();
}
/////////////////////////////////////////////////////////////
//Cuando queres intercalar un numero salta a lo ultimo, en vez de manejar la posicion con length para todo, abria que setearla con la mismo posicion o algo asi aca dejo un fragmento que capaz ayuda (es para sacar la posicion del curso)
/*/ document.getElementById("trigger").addEventListener("click", function(){
var myElement = document.getElementById('text-element');
var startPosition = myElement.selectionStart;
var endPosition = myElement.selectionEnd;
// Comprueba si has seleccionado texto
if(startPosition == endPosition){
alert("La posición del cursor es (" + startPosition + "/" + myElement.value.length + ")");
}else{
alert("Texto seleccionado de ("+ startPosition +" to "+ endPosition + " of " + myElement.value.length + ")");
}
},false);*/
/*
. .
b. 8 ,o888888o. 8 8888 8 .8. `8.`8888. ,8' 8 888888888o 8 8888888888 ,o888888o. 8 888888888o. `8.`8888. ,8' ,8. ,8. .8. d888888o.
888o. 8 . 8888 `88. 8 8888 8 .888. `8.`8888. ,8' 8 8888 `88. 8 8888 . 8888 `88. 8 8888 `88. `8.`8888. ,8' ,888. ,888. .888. .`8888:' `88.
Y88888o. 8 ,8 8888 `8b 8 8888 8 :88888. `8.`8888. ,8' 8 8888 `88 8 8888 ,8 8888 `8b 8 8888 `88 `8.`8888. ,8' .`8888. .`8888. :88888. 8.`8888. Y8
.`Y888888o. 8 88 8888 `8b 8 8888 8 . `88888. `8.`8888.,8' 8 8888 ,88 8 8888 88 8888 `8b 8 8888 ,88 `8.`8888.,8' ,8.`8888. ,8.`8888. . `88888. `8.`8888.
8o. `Y888888o. 8 88 8888 88 8 8888 8 .8. `88888. `8.`88888' 8 8888. ,88' 8 888888888888 88 8888 88 8 8888. ,88' `8.`88888' ,8'8.`8888,8^8.`8888. .8. `88888. `8.`8888.
8`Y8o. `Y88888o8 88 8888 88 8 8888 8 .8`8. `88888. `8. 8888 8 888888888P' 8 8888 88 8888 88 8 888888888P' `8. 8888 ,8' `8.`8888' `8.`8888. .8`8. `88888. `8.`8888.
8 `Y8o. `Y8888 88 8888 ,8P 8 8888888888888 .8' `8. `88888. `8 8888 8 8888 8 8888 88 8888 ,8P 8 8888`8b `8 8888 ,8' `8.`88' `8.`8888. .8' `8. `88888. `8.`8888.
8 `Y8o. `Y8 `8 8888 ,8P 8 8888 8 .8' `8. `88888. 8 8888 8 8888 8 8888 `8 8888 ,8P 8 8888 `8b. 8 8888 ,8' `8.`' `8.`8888. .8' `8. `88888. 8b `8.`8888.
8 `Y8o.` ` 8888 ,88' 8 8888 8 .888888888. `88888. 8 8888 8 8888 8 8888 ` 8888 ,88' 8 8888 `8b. 8 8888 ,8' `8 `8.`8888. .888888888. `88888. `8b. ;8.`8888
8 `Yo `8888888P' 8 8888 8 .8' `8. `88888. 8 8888 8 8888 8 888888888888 `8888888P' 8 8888 `88. 8 8888 ,8' ` `8.`8888. .8' `8. `88888. `Y8888P ,88P'
b. 8 8 8888888888 8 8888888888 .8. d888888o. 8888888 8888888888 .8. 8 888888888o 8 888888888o. .8. ,o888888o. 8888888 8888888888 8 8888 ,o888888o. .8.
888o. 8 8 8888 8 8888 .888. .`8888:' `88. 8 8888 .888. 8 8888 `88. 8 8888 `88. .888. 8888 `88. 8 8888 8 8888 8888 `88. .888.
Y88888o. 8 8 8888 8 8888 :88888. 8.`8888. Y8 8 8888 :88888. 8 8888 `88 8 8888 `88 :88888. ,8 8888 `8. 8 8888 8 8888 ,8 8888 `8. :88888.
.`Y888888o. 8 8 8888 8 8888 . `88888. `8.`8888. 8 8888 . `88888. 8 8888 ,88 8 8888 ,88 . `88888. 88 8888 8 8888 8 8888 88 8888 . `88888.
8o. `Y888888o. 8 8 888888888888 8 888888888888 .8. `88888. `8.`8888. 8 8888 .8. `88888. 8 8888. ,88' 8 8888. ,88' .8. `88888. 88 8888 8 8888 8 8888 88 8888 .8. `88888.
8`Y8o. `Y88888o8 8 8888 8 8888 .8`8. `88888. `8.`8888. 8 8888 .8`8. `88888. 8 888888888P' 8 888888888P' .8`8. `88888. 88 8888 8 8888 8 8888 88 8888 .8`8. `88888.
8 `Y8o. `Y8888 8 8888 8 8888 .8' `8. `88888. `8.`8888. 8 8888 .8' `8. `88888. 8 8888 8 8888`8b .8' `8. `88888. 88 8888 8 8888 8 8888 88 8888 .8' `8. `88888.
8 `Y8o. `Y8 8 8888 8 8888 .8' `8. `88888. 8b `8.`8888. 8 8888 .8' `8. `88888. 8 8888 8 8888 `8b. .8' `8. `88888. `8 8888 .8' 8 8888 8 8888 `8 8888 .8' .8' `8. `88888.
8 `Y8o.` 8 8888 8 8888 .888888888. `88888. `8b. ;8.`8888 8 8888 .888888888. `88888. 8 8888 8 8888 `8b. .888888888. `88888. 8888 ,88' 8 8888 8 8888 8888 ,88' .888888888. `88888.
8 `Yo 8 888888888888 8 8888 .8' `8. `88888. `Y8888P ,88P' 8 8888 .8' `8. `88888. 8 8888 8 8888 `88. .8' `8. `88888. `8888888P' 8 8888 8 8888 `8888888P' .8' `8. `88888.
,o888888o. 8 8888 88 8 8888888888 8 888888888o 8 888888888o. 8 8888888888 `8.`888b ,8' 8 8888888888 b. 8 8 8888 8 888888888o. 8 8888888888 8 888888888o. 8 888888888o. ,o888888o. 8 888888888o. 8 8888888888 d888888o.
. 8888 `88. 8 8888 88 8 8888 8 8888 `88. 8 8888 `88. 8 8888 `8.`888b ,8' 8 8888 888o. 8 8 8888 8 8888 `88. 8 8888 8 8888 `88. 8 8888 `88. . 8888 `88. 8 8888 `88. 8 8888 .`8888:' `88.
,8 8888 `8b 8 8888 88 8 8888 8 8888 `88 8 8888 `88 8 8888 `8.`888b ,8' 8 8888 Y88888o. 8 8 8888 8 8888 `88 8 8888 8 8888 `88 8 8888 `88 ,8 8888 `8b 8 8888 `88 8 8888 8.`8888. Y8
88 8888 `8b 8 8888 88 8 8888 8 8888 ,88 8 8888 ,88 8 8888 `8.`888b ,8' 8 8888 .`Y888888o. 8 8 8888 8 8888 ,88 8 8888 8 8888 ,88 8 8888 ,88 88 8888 `8b 8 8888 ,88 8 8888 `8.`8888.
88 8888 88 8 8888 88 8 888888888888 8 8888. ,88' 8 8888. ,88' 8 888888888888 `8.`888b ,8' 8 888888888888 8o. `Y888888o. 8 8 8888 8 8888. ,88' 8 888888888888 8 8888. ,88' 8 8888. ,88' 88 8888 88 8 8888. ,88' 8 888888888888 `8.`8888.
88 8888 `8. 88 8 8888 88 8 8888 8 888888888P' 8 888888888P' 8 8888 `8.`888b ,8' 8 8888 8`Y8o. `Y88888o8 8 8888 8 888888888P' 8 8888 8 888888888P' 8 888888888P' 88 8888 88 8 888888888P' 8 8888 `8.`8888.
88 8888 `8,8P 8 8888 88 8 8888 8 8888 8 8888`8b 8 8888 `8.`888b8' 8 8888 8 `Y8o. `Y8888 8 8888 8 8888`8b 8 8888 8 8888`8b 8 8888`8b 88 8888 ,8P 8 8888`8b 8 8888 `8.`8888.
`8 8888 ;8P ` 8888 ,8P 8 8888 8 8888 8 8888 `8b. 8 8888 `8.`888' 8 8888 8 `Y8o. `Y8 8 8888 8 8888 `8b. 8 8888 8 8888 `8b. 8 8888 `8b. `8 8888 ,8P 8 8888 `8b. 8 8888 8b `8.`8888.
` 8888 ,88'8. 8888 ,d8P 8 8888 8 8888 8 8888 `8b. 8 8888 `8.`8' 8 8888 8 `Y8o.` 8 8888 8 8888 `8b. 8 8888 8 8888 `8b. 8 8888 `8b. ` 8888 ,88' 8 8888 `8b. 8 8888 `8b. ;8.`8888
`8888888P' `8. `Y88888P' 8 888888888888 8 8888 8 8888 `88. 8 888888888888 `8.` 8 888888888888 8 `Yo 8 8888 8 8888 `88. 8 888888888888 8 8888 `88. 8 8888 `88. `8888888P' 8 8888 `88. 8 888888888888 `Y8888P ,88P'
. .
,o888888o. 8 8888 88 8 8888888888 8 888888888o. 8 8888888888 d888888o. ,o888888o. ,o888888o. b. 8 ,o888888o. ,o888888o. 8 8888888888 ,8. ,8. ,o888888o. d888888o.
. 8888 `88. 8 8888 88 8 8888 8 8888 `^888. 8 8888 .`8888:' `88. 8888 `88. . 8888 `88. 888o. 8 . 8888 `88. 8888 `88. 8 8888 ,888. ,888. . 8888 `88. .`8888:' `88.
,8 8888 `8b 8 8888 88 8 8888 8 8888 `88. 8 8888 8.`8888. Y8 ,8 8888 `8. ,8 8888 `8b Y88888o. 8 ,8 8888 `8b ,8 8888 `8. 8 8888 .`8888. .`8888. ,8 8888 `8b 8.`8888. Y8
88 8888 `8b 8 8888 88 8 8888 8 8888 `88 8 8888 `8.`8888. 88 8888 88 8888 `8b .`Y888888o. 8 88 8888 `8b 88 8888 8 8888 ,8.`8888. ,8.`8888. 88 8888 `8b `8.`8888.
88 8888 88 8 8888 88 8 888888888888 8 8888 88 8 888888888888 `8.`8888. 88 8888 88 8888 88 8o. `Y888888o. 8 88 8888 88 88 8888 8 888888888888 ,8'8.`8888,8^8.`8888. 88 8888 88 `8.`8888.
88 8888 `8. 88 8 8888 88 8 8888 8 8888 88 8 8888 `8.`8888. 88 8888 88 8888 88 8`Y8o. `Y88888o8 88 8888 88 88 8888 8 8888 ,8' `8.`8888' `8.`8888. 88 8888 88 `8.`8888.
88 8888 `8,8P 8 8888 88 8 8888 8 8888 ,88 8 8888 `8.`8888. 88 8888 88 8888 ,8P 8 `Y8o. `Y8888 88 8888 ,8P 88 8888 8 8888 ,8' `8.`88' `8.`8888. 88 8888 ,8P `8.`8888.
`8 8888 ;8P ` 8888 ,8P 8 8888 8 8888 ,88' 8 8888 8b `8.`8888. `8 8888 .8' `8 8888 ,8P 8 `Y8o. `Y8 `8 8888 ,8P `8 8888 .8' 8 8888 ,8' `8.`' `8.`8888. `8 8888 ,8P 8b `8.`8888.
` 8888 ,88'8. 8888 ,d8P 8 8888 8 8888 ,o88P' 8 8888 `8b. ;8.`8888 8888 ,88' ` 8888 ,88' 8 `Y8o.` ` 8888 ,88' 8888 ,88' 8 8888 ,8' `8 `8.`8888. ` 8888 ,88' `8b. ;8.`8888
`8888888P' `8. `Y88888P' 8 888888888888 8 888888888P' 8 888888888888 `Y8888P ,88P' `8888888P' `8888888P' 8 `Yo `8888888P' `8888888P' 8 888888888888 ,8' ` `8.`8888. `8888888P' `Y8888P ,88P'
*/
#input{
background-color:#eef;
border-style:solid;
border-radius: 10px;
border-width: 1px;
outline:none;
padding:3px
}
.agregar{
background-color:#eef;
border-style:solid;
border-radius: 10px;
border-width: 1px;
outline:none;
padding:3px;
margin-bottom:5px;
width: 160px;
}
<input placeholder= "Cantidad de digitos ej--> 3" class="agregar" contenteditable="true" ></input>
<input placeholder=" Color ej--> F0FAF3 " class="agregar" contenteditable="true" ></input>
<div id="input" contenteditable="true" ></div>