Bueno, resulta que tengo un contenedor, y cuando hago click le mando a JavaScript insertar un elemento ahí con insertadjacentHTML() y que me lo enfoque y me pasa una cosa.
Me aparece unos borders grises bastante curiosos, ¿me podriáis decir por qué salen? Me ayudaría mucho. Gracias de antemano =)
Respuestas
Por lo que comentas, creo que el error no está en insertadjacentHTML() sino en la parte en la que dices "y que me lo enfoque". Es posible que en tu página haya definido algún estilo para cuando un elemento tiene el foco. Busca en tus estilos reglas que contengan la pseudo-clase :focus
@javiereguiluz
Gracias por tu ayuda pero es que te reseño que pasa exactamente igual que con los inputs (no se si te fijastes), cuando esta el cursor activo estan como 'destacados' con un borde negro y fino Es por eso por lo que yo creo que a lo mejor cambian de estado, pasan de estar en estado estandard a estado 'algo' ¿Pero el que? Otro problema que tengo es que al darle al tab quiero que se me enfoque el siguiente elemento contenteditable pero no lo consigo tampoco
@raultrysw
Creo que tienes razón y es precisamente lo que intentaba decirte antes. Al "enfocar" los elementos con JavaScript, los pasas al estado "focus" y en CSS puedes aplicar estilos a ese estado con la pseudo-clase :focus. Ejemplo:
input { border: 2px solid black; } input:focus { border-color: red; }
Por otra parte, para controlar el orden en el que se pasa de un elemento a otro, tienes que añadir el atributo tabindex a cada elemento. El valor tiene que ser un número que indica el orden en el que se pasa de uno a otro al pulsar el tabulador. Ejemplo:
<p tabindex="1"> Primer párrafo </p> <p tabindex="2"> Segundo párrafo </p> <p tabindex="3"> Tercer párrafo </p>
@javiereguiluz