Foros del Web » Creando para Internet » CSS »

Cambiar la barrita dentro de un input

Estas en el tema de Cambiar la barrita dentro de un input en el foro de CSS en Foros del Web. Hola a todos, me estoy volviendo loca a ver si alguien me puede ayudar. Tengo un formulario con varios "inputs", el formulario tiene un estilo ...
  #1 (permalink)  
Antiguo 31/10/2011, 09:51
 
Fecha de Ingreso: noviembre-2006
Mensajes: 13
Antigüedad: 17 años, 5 meses
Puntos: 0
Pregunta Cambiar la barrita dentro de un input

Hola a todos, me estoy volviendo loca a ver si alguien me puede ayudar.
Tengo un formulario con varios "inputs", el formulario tiene un estilo que hace que se vea más grande de lo habitual, hasta aqui nada del otro mundo ... el problema es que el cliente quiere que el cursor que se visualiza dentro del input "palpitando" no se si me explico.. quiere que esa barrita, o cursor se visualice más gruesa o resaltada de alguna manera. No he encontrado nada de nada sobre esto, creo que la barrita en cuestión va acorde con el estilo de la fuente (si estoy equivocada o se puede hacer por css por favor... hacerdmelo saber) pero ¿hay alguna otra forma de simularlo? ¿alguien lo ha hecho? realmente me parece algo importante en cuanto a la accesibilidad pero no he econtrado nada.
Gracias de antemano.
  #2 (permalink)  
Antiguo 31/10/2011, 10:37
 
Fecha de Ingreso: septiembre-2010
Mensajes: 75
Antigüedad: 13 años, 6 meses
Puntos: 0
Respuesta: Cambiar la barrita dentro de un input

Éste no lo soluciona el font-size ?? si pones una letra más grande supongo que la barrita esta también se adapta a la letra.
  #3 (permalink)  
Antiguo 31/10/2011, 10:49
 
Fecha de Ingreso: noviembre-2006
Mensajes: 13
Antigüedad: 17 años, 5 meses
Puntos: 0
Respuesta: Cambiar la barrita dentro de un input

Ya lo he probado y no funciona, el color y el "alto" si pero lo que es el grosor para que se vea más anchito... nada de nada. Alguien más tiene alguna idea? Se me ha ocurrido "dibujarlo" e ir trasladandolo como hace el original pero ni idea de como hacerlo quizá con una imagen e ir obteniendo la posición... ufff que mareo, aver si alguien ha hecho algo parecido y me ayudaaaaaaaaaaaaaaa.
  #4 (permalink)  
Antiguo 31/10/2011, 18:23
Avatar de Oscar_Hidro  
Fecha de Ingreso: septiembre-2011
Ubicación: Aguascalientes, Mexico.
Mensajes: 200
Antigüedad: 12 años, 6 meses
Puntos: 25
Respuesta: Cambiar la barrita dentro de un input

Hola saraal. Hasta donde tengo entendido, esto no se puede hacer en css, puesto que es una funcion del sistema ya definido. Pero, aunque aqui no es el lugar indicado para comentarlo, puedes checar este pequeño tutorial para controlarlo desde tu equipo de computo.

http://www.upv.es/entidades/ASIC/man..._VISUAL_XP.pdf

Saludos
  #5 (permalink)  
Antiguo 02/11/2011, 05:41
 
Fecha de Ingreso: noviembre-2006
Mensajes: 13
Antigüedad: 17 años, 5 meses
Puntos: 0
Respuesta: Cambiar la barrita dentro de un input

Muchas gracias Oscar, es lo que he visto en todas partes, gracias por la guia, al tendré en cuenta.
  #6 (permalink)  
Antiguo 02/11/2011, 14:23
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 21 años, 5 meses
Puntos: 317
Respuesta: Cambiar la barrita dentro de un input

Creo que ese cursor se llama text.

Nunca lo probé, pero si haces tu propio archivo de cursor y lo subes al servidor, ¿con CSS no lo puedes llamar para que se vea en un editable?.

Si no se puede, hay que insistir para que lo agreguen. Como bien se entiende, es una cuestión para mejorar la accesibilidad.
  #7 (permalink)  
Antiguo 06/11/2011, 11:38
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 21 años, 5 meses
Puntos: 317
Respuesta: Cambiar la barrita dentro de un input

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

Etiquetas: input
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 01:31.