Estoy tratando de crear un marcador de posición en el elemento span, y cuando el usuario se enfoca en el texto, el marcador de posición desaparece y el usuario puede escribir algo en él.
Si ejecuta el código a continuación en otro navegador como Chrome y Edge, el marcador de posición desaparece correctamente cuando se enfoca en el texto; sin embargo, en Firefox, parece que no puede enfocar o editar el texto. Me gustaría saber cuál es la diferencia entre el navegador Firefox y otros, y también preferiría que esto se pueda resolver a través de CSS en lugar de Javascript.
HTML:
<body contenteditable="true"> <span style="font-size: 16pt; font-family: 'Verdana'; font-weight: bold;" data-runningid="1.1" data-placeholder="Enter new paragraph here..." class="newParagraphPlaceholder" data-mce-style="font-size: 16pt; font-family: 'Verdana'; font-weight: bold;"> </span> </body>CSS:
.newParagraphPlaceholder { display: inline-block; } .newParagraphPlaceholder:empty::before { content: attr(data-placeholder); color: grey; }Consulte la demostración aquí: https://jsfiddle.net/6L8gyfk7/2/ .
Tenga en cuenta que hay un cuerpo con el atributo contenteditable='true' etiqueta que envuelve la etiqueta de intervalo que necesito conservar.
Debido a que en Mozilla el -moz-user-focus está configurado en none de manera predeterminada, puede verificar esto yendo a la consola -> calculado
Puedes arreglar esto por
-moz-user-focus: select-after;Sin embargo, algo que no entiendo de su código es ¿por qué está usando tanto estilo dentro de su? Obtienes el mismo resultado si lo haces
<span class="newParagraphPlaceholder"data-runningid="1.1" data-placeholder="Enter new paragraph here..."></span> .newParagraphPlaceholder { display: inline-block; font-size: 16pt; font-weight: bold; }Sin embargo, podría ser solo yo, pero con un lote largo de código, se encuentra en una gran lucha para ajustar ciertas áreas porque no está escrito correctamente en CSS.
Eliminé contenteditable de body to span y se despertó y si desea verificar el soporte del navegador para css Property, puede verificar aquí Codepen Link
.newParagraphPlaceholder { display: inline-block; outline: none } .newParagraphPlaceholder:empty::before { content: attr(data-placeholder); color: grey; } <!-- html is the same --> <body > <span contenteditable="true" style="font-size: 16pt; font-family: 'Verdana'; font-weight: bold;" data-runningid="1.1" data-placeholder="Enter new paragraph here..." class="newParagraphPlaceholder" data-mce-style="font-size: 16pt; font-family: 'Verdana'; font-weight: bold; color: #000; "></span> </body>