Quiero tener un área de texto que muestre los números de línea a la izquierda. Wrap debe estar configurado en "off" (para que el desplazamiento horizontal esté disponible). Quiero tener mi página como un único archivo .html autónomo (no habrá gráficos), por lo que me gustaría evitar cualquier marco de terceros.HTML/CSS/JS: ¿Cómo hacer una ilusión de un área de texto con números de línea?
¿Qué camino debo seguir? ¿Cómo harías esto?
Creo que su mejor opción sería tener un área de texto regular y mostrar una vista previa (como desbordamiento de pila) mientras escriben. Dentro de esa vista previa, puede agregar fácilmente números de línea en cada línea y formatear el aspecto a través de CSS.
Tendría que ajustar el área de texto y capturar las teclas para buscar caracteres de nueva línea (por ejemplo, ENTER). Haciendo una búsqueda rápida en Google y obtienes http://www.dhtmlgoodies.com/forum/viewtopic.php?t=506
Personalmente, solo tengo un área de texto regular y un separador en el lado izquierdo que muestra los números (posiblemente autoajustable a medida que se agregan más retornos de carro).
Otro método simple es crear una imagen de fondo estrecha, pero alta y algo de relleno izquierdo en el área de texto. Esto tiene la menor advertencia de tener un número fijo de filas y estilo de fuente, pero es la opción con la menor cantidad de código requerido.
Sin imágenes, eso es difícil.
mejor opción: Coloque una segunda área de texto con valores idénticos (tamaño de letra, altura de línea, relleno ...) pero diferente estilo (sin color de fondo, no hay fronteras) a la izquierda de su área de texto originales. Haga que sea de solo lectura, sáquelo de la rotación de la pestaña (tabindex=99999 podría hacer el truco o simplemente deshabilitándolo), y ponga los números de línea en él. Esto debería funcionar bien y, en lo que a mí respecta, debería incluso sobrevivir a cosas como que el cliente cambie el tamaño de la fuente manualmente en su navegador.
Incluso puede utilizar position: relative y un gran valor padding-left: en el área de texto original, para mover el área de texto contador en el original.
Desventaja: El contador de línea no seguirá al desplazamiento vertical del área de texto. Ver los comentarios a continuación.
¿No lo deshabilitaría simplemente sacándolo de la rotación de pestañas? – pimlottc
Es cierto. Cambié mi respuesta en consecuencia, aplausos. –
¿Crees que un DIV con los números de línea no funcionaría? –
Comenzaría con dos áreas de texto y mecanismo de sincronización. Algo como esto,
<script>
window.sync = function(e){
var textarea = document.getElementById("lines");
var source = document.getElementById("some_text_area");
textarea.scrollTop = source.scrollTop;
}
window.populate = function populate(){
if(populate.started){
return;
}
populate.started = true;
var textarea = document.getElementById("lines");
var str = '';
for(var i=0;i < 100;i++){
str = str + (i +'\r\n');
}
textarea.value = str;
}
</script>
<div>
<textarea
style="width:40px;overflow:hidden;height:40px;"
readonly="true"
id="lines"
></textarea>
<textarea
style="width:500px;height:40px;"
id="some_text_area"
onclick="populate()"
onscroll="sync();"
></textarea>
</div>
Por supuesto populate() función (y la declaración de estilo y la declaración del evento) es más robusto e inteligente, pero, sólo para el propósito escaparate.
Lo siento, no, quiero que el usuario las tenga mientras escribe. El área de texto contendrá información especial, un elemento por línea, y el número de línea se usará para identificar el artículo. –