Sé que no se pueden poner varios colores en una misma caja de texto, pero he hecho un "arreglo", un apaño. Se trata de ir superponiendo cajas de texto sin borde a la caja de texto original, y con fondo blanco. El resultado es bueno, de momento solo es un croquis de lo que podría ser la idea final.
Además hay que tener en cuenta la fuente, que funciona de diferente manera en firefox que en IE, y que seguramente no funcionará igual en linux que en windows. Seguramente habría que tener en cuenta el tamaño de letra del navegador y todas esas predeterminaciones, pero he intentado poner todo bien para intentar que se vea bien en todos los casos posibles.
Bueno el código sería este:
Código PHP:
Hola Contenido
<input type="text" id="caja" value="ABCDEF" />
Buuu
<script>
function e(q,noBr) {
document.body.appendChild( document.createTextNode(q) );
if(!noBr) document.body.appendChild( document.createElement("BR") );
}
var laCaja=document.getElementById("caja");
//la metemos dentro de un div contenedor
var divContenedor=document.createElement("DIV");
divContenedor.style.position="relative";
document.body.insertBefore(divContenedor, laCaja);
divContenedor.appendChild(laCaja);
//hacemos a la caja de posicion absoluta, y le damos indice z=3
laCaja.style.position="relative";
laCaja.style.zIndex="3";
laCaja.style.fontFamily="Tahoma";
laCaja.style.fontSize="13px";
laCaja.style.width=laCaja.offsetWidth+"px";
laCaja.style.height=laCaja.offsetHeight+"px";
//hallamos las dimensiones de la caja, y le restamos los bordes (2px de borde):
var laCajaWidth=laCaja.offsetWidth-4;
var laCajaHeight=laCaja.offsetHeight-6;
///////////// posicionamiento según Firefox
function adjuntarCaja(color,left,top,valor) {
var cajaX=document.createElement("INPUT");
cajaX.style.border="none";
cajaX.style.backgroundColor="transparent";
cajaX.style.color=color;
cajaX.style.position="absolute";
cajaX.style.zIndex="4";
cajaX.style.fontFamily="Tahoma";
cajaX.style.fontSize="13px";
cajaX.style.top=top+"px";
cajaX.style.left=left+"px";
cajaX.style.width=(laCajaWidth-left)+"px";
cajaX.style.height=(laCajaHeight)+"px";
cajaX.value=valor;
divContenedor.appendChild(cajaX);
return cajaX;
}
// MODELO IE (el top=3 y el left uno menos que en el estándar)
if(document.all) {
adjuntarCaja("red",10,3,"B");
adjuntarCaja("blue",17,3,"C");
adjuntarCaja("green",25,3,"D");
adjuntarCaja("orange",33,3,"E");
adjuntarCaja("olive",40,3,"F");
}
// MODELO ESTANDAR ??? (el top=2 y el left lo hallaremos midiendo cada letra)
else {
adjuntarCaja("red",11,2,"B");
adjuntarCaja("blue",18,2,"C");
adjuntarCaja("green",26,2,"D");
adjuntarCaja("orange",34,2,"E");
adjuntarCaja("olive",41,2,"F");
}
//alert(document.body.innerHTML);
</script>
Bueno, de momento no es nada funcional. ¿Creeis que merece la pena continuar con el proyecto? ¿Lo véis bien encaminado? Y bueno... ¿Se representa bien en vuestros navegadores?
Un saludo
