Cómo personalizar los atributos del área de texto
Si agregas contenteditable="true" al texto, podrás descubrir lo mágico que es este atributo. Por lo tanto, podemos establecer el atributo contenteditable="true" en la etiqueta HTML y luego podemos editar la etiqueta.
El atributo Contenteditable es compatible con todos los navegadores (no se ha probado la compatibilidad con versiones anteriores a IE6).
A veces podemos usar DIV en lugar de input o textarea para conseguir el mismo efecto. Por ejemplo, cuando usamos ajax, podemos obtener el contenido del DIV al enviar el formulario.
Las personas cuidadosas encontrarán que el cuadro de texto en el espacio QQ es en realidad un DIV, no un cuadro de texto de área de texto.
Cómo Div CSS simula un campo de texto de área de texto altamente adaptable para implementar el atributo contenteditable del estándar HTML5.
Este efecto se logra principalmente agregando el atributo contenteditable en HTML5 a la etiqueta (contenteditable: especifica si los usuarios pueden editar contenido). IE también admitirá este atributo, lo cual es excelente, por lo que no necesita preocuparse demasiado por los problemas de compatibilidad.
Demo:
Copia el código
El código es el siguiente:
ltstyle type="text/css " >> p>
. edición de demostración { border: 1px solid # dddddd; ancho: 450px altura mínima: 20px_ altura: 20px; contorno: 0px relleno: 2px} // esquema: 0px Cuando el contenedor de la solución de estilo se enfoca, el contenedor estará en el navegador FF. efecto de un marco punteado.
. edición de demostración p { margen: 0px; relleno: 0px}
lt/style gt;
ltdiv contenido editable = " true " estilo = " borde: 1px sólido # dddddd; ancho: 360px altura mínima: 20px_ altura: 20px; contorno: 0px" gt lt/div gt;
contenido ltdiv editable = " true " class = " edición de demostración " gt; lt/div gt;
Adjunto:
En el navegador FF, cuando el contenedor recibe el foco, la altura del cursor será la misma que la altura del contenedor o el cursor no se mostrará. En este momento, si se agrega un marcador de posición al contenedor de forma predeterminada, como
, este problema se puede resolver.
Ahora Yuzi introdujo otra buena manera de editar y adaptar automáticamente la altura sin agregar código js. Abramos los ojos. Yuzi también puede usar DIV directamente como cuadro de texto, similar al cuadro de texto de TextArea. Más importante aún, la experiencia de usuario de DIV es más perfecta y atractiva.
El atributo contentEditable en HTML puede activar el estado editable de ciertos elementos. Quizás no haya utilizado la propiedad contentEditable o ni siquiera haya oído hablar de ella. La función de contentEditable es bastante mágica. Puede hacer que se puedan escribir divs o páginas web completas, tramos y otros elementos.
Nuestro contenido de texto de entrada más utilizado es que después de usar el atributo contentEditable en la entrada y el área de texto, puede ingresar contenido en muchos elementos como div, tabla, p, span, cuerpo, etc. En particular, el estándar html5 ya soporta efectivamente contentEditable. Seamos testigos todos juntos de ello.
¿No es mágico después de establecer el atributo Content Editable = "true"?