Muy bueno lo de
getBoxObjectFor, no sabía que ya existía.
A mí me resultó curioso que postearas en javascript. Por lo general lo primero que uno piensa es que hay una solución CSS.
Con JS es relativamente fácil. De hecho, ni siquiera hace falta poner la caja de texto ni ninguna caja, podemos hacer que el programa escriba los guiones a continuación del último caracter del párrafo hasta completar el "renglón". Ya hice algún ejemplo de ese
método, así que no lo repito.
Si vamos a agregar un elemento a la última línea, puede ser cualquiera; con CSS podemos hacer que muestren el contenido de acuerdo al tamaño de la caja, ya está visto en el ejemplo anterior.
Y lo de la lectura de la posición es práctico como cutandpaste, porque lo puede usar cualquiera en cualquier lado, y se supone que funciona. El punto -que venimos machacando desde hace rato- es que si lo vamos a hacer en nuestro documento, no precisamos de esa "compatibilidad", porque ya sabemos dónde ubicamos nuestro relleno de guiones. Con medir sobre lo que tenemos alcanza y sobra.
Te dejo otra versión.
Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<script type="text/javascript">
function ajusta(){
var losGuiones = "----------------------------------------------------------------------";
var losRellenos = document.querySelectorAll(".elRelleno");
var elAncho = document.getElementById("elTexto").offsetWidth;
for(i=0; i<losRellenos.length; i++){
var aIzquierda0 = losRellenos[i].parentElement.offsetLeft;
var aIzquierda1 = losRellenos[i].offsetLeft;
losRellenos[i].innerHTML = losGuiones;
losRellenos[i].style.width = elAncho - (aIzquierda1 - aIzquierda0) +"px";
}
}
</script>
<style type="text/css">
#elTexto {width: 400px; background-color: silver; font-size: 18px; }
.elRelleno {display: inline-block; overflow: hidden; width: 0; height: 1em;
white-space: nowrap; background-color:red; }
</style>
</head>
<body>
<input type=button onclick="ajusta()" value="Completa">
<div id=elTexto>
alfa bravo charly delta<span class=elRelleno></span><br>
eco foxtrot golf hotel<span class=elRelleno></span><br>
indio julieta kilo mike noviembre<span class=elRelleno></span><br>
</div>
</body>
</html>
Allí hay un par de ajustes por hacer. Si bien a los guiones los saqué del código del "párrafo", como es javascript ni siquiera precisamos de las cajas: también las podemos insertar por programa. Ni aún la cadena de guiones en la variable: la podemos escribir con un loop. Quiero decir, que el código fuente puede quedar todavía más limpio.
De cualquier forma, es loable que hayás encontrado esta solución, y que hayás propuesto algo que valía la pena leer, y probar. Como dice el amigo
emprear, es un "
ejercicio que me pareció por demás interesante en vista de otros lamentables posts que estuve leyendo".