Y no. Por ahora no hay propuestas para personalizar el cursor de editables.
Como me dio un poco de culpa hacerte buscar inutilmente, te preparé un (casi) borrador para mostrarlo destacado.
Tiene sus limitaciones y hay que pulirlo, pero igual te explico cómo trabaja.
Como uno de los inconvenientes de agrandar el cursor "I-beam" dentro del
input es que debe estar entre dos caracteres
pero sin separarlos más de lo que están; ya es imposible meter a la fuerza un nuevo cursor que sea "más ancho", así que opté por destacarlo con un color "de fondo". En el ejemplo hay una alternancia entre el caracter anterior y el posterior (como si flameara una bandera), pero se puede hacer un intermitetnte que "pise" ambos caracteres al mismo tiempo. Lo pinté de color fuchsia, porque me pareció que se veía bien; tú le pones el que quieras.
Código HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head><title>DESTACA CURSOR I-BEAM.</title>
<script language="JavaScript">
var txt0, txt1;
var colorSombra = "white";
var lado = 0;
var rango = "";
var cursor = -1;
function posicionCursor(){
// PARA IE
if (document.selection && (document.selection != 'undefined')){
var rango = document.selection.createRange();
var cuenta = 0;
while (rango.move('character', -1))
cuenta++;
cursor = cuenta;
}
// PARA FF
else if (txt0.selectionStart >= 0) cursor = txt0.selectionStart;
document.title = cursor;
}
function destaca0() {
txt0 = document.getElementById("texto")
txt1 = document.getElementById("sombra");
txt1.style.color = colorSombra;
if(lado == 0){
txt1.value = txt0.value.substring(0,cursor-1) + "▐";
lado = 1;
}
else{
txt1.value = txt0.value.substring(0,cursor) + "▌"
lado = 0;
}
setTimeout(destaca0, 400);
}
onload = destaca0;
</script>
<style>
/*EL EFECTO SE NOTA MEJOR CON UNA MONOSPACE, PERO SE PUEDE CAMBIAR.*/
input {font: bold 1.5em monospace; width: 14em; position: absolute;
top: 0; left: 0; }
</style>
</head>
<body>
<h2>Cursor destacado.</h2>
<div style="position:relative; font-size:16px; height:2em;">
<input type= "text" id= "sombra"
style= "background-color: white; color: white; ">
<input type= "text" id= "texto" value= "FOROS DEL WEB" maxlength= 18
onclick= "posicionCursor()" onblur= "colorSombra='white'"
onkeyup= "posicionCursor()" onfocus= "colorSombra='fuchsia'"
style= "background-color: transparent; ">
</div>
<textarea>Sin Formato.</textarea>
</body>
</html> Como dije, es un borrador. Espero que alguien encuentre un método más práctico hasta que lo inventen los navegadores.
Ah!. No sé de dónde saqué el código original, así que no pongo los créditos. De cualquier forma, lo reescribí tanto que el autor no lo va a reconocer, y así no me va a reclamar nada.
Sé que caricatos tiene un Editor que trabaja muy bien con la posición de cursores; quizá te sirva para estudiarlo.
http://www.pepemolina.com/editor/ Negrita en un TEXTAREA Insertar simbolos en un input mediante un click