fuente de ideas
En cuanto a la entrada, las etiquetas de entrada y las etiquetas de área de texto pueden satisfacer más del 90% de nuestras necesidades, pero a veces hay algunas necesidades especiales, o cuando se cambian los proyectos de otras personas, es inconveniente cambiar las etiquetas, en este caso no se pueden satisfacer las necesidades.
En este punto, podemos usar algunas etiquetas como div para lograr
Este artículo incluye puntos de conocimiento.
Atributo: contenteditable es un atributo de enumeración que indica si el usuario puede editar el elemento. Si puede, el navegador modifica los componentes del elemento para permitir la edición.
Cuando este atributo se agrega a la etiqueta, el contenido se puede editar para lograr el efecto de entrada. Y lograr el efecto de marcador de posición, de la siguiente manera
//html
<div>请在下方的框中输入你喜欢的句子</div>
<div contenteditable placeholder='请输入文字' class="input"></div>
//css
.input {
width: 500px;
height: 24px;
line-height: 24px;
font-size: 14px;
padding: 5px 8px;
border: 1px solid #ddd;
}
.input:empty::before {
content: attr(placeholder);
}
como sigue
Dado que se usará a continuación, lo enumeraremos directamente aquí.
La mayoría de nosotros sabemos que el atributo contenteditable tiene verdadero y falso. , pero más que eso
valor de atributo contento
contenteditable="" //表示元素是可编辑的
contenteditable="events"
contenteditable="caret"
//让div只能键入文本值
//兼容性不好，除了谷歌，火狐ie都不支持
contenteditable="plaintext-only"
contenteditable="true"//表示元素是可编辑的
contenteditable="false" //表示元素是不可编辑的
En cuanto a contenteditable="events" y contenteditable="caret", no he descubierto lo que significan, pero no profundizaremos en ello aquí ya que no se usará a continuación.
Encuadernación bidireccional
Todos sabemos que div no puede usar el modelo v, entonces, ¿cómo lograr un enlace bidireccional?
//html
<div id="id">
<div>请在下方的框中输入你喜欢的句子</div>
<div contenteditable placeholder='请输入文字' class="input" v-html="content" @input="content=$event.target.innerHTML"></div>
<div>{
{
content}}</div>
</div>
<div contenteditable placeholder='请输入文字' v-html="item.content"></div>
//js
var id = new Vue({
el: "#id",
data: {
content: "",
},
})
Pero a veces solo quiero copiar el texto, pero encuentro que el texto copiado es etiqueta + estilo de etiqueta, entonces, ¿cómo lidiar con el cambio?
En este momento se utilizará contenteditable="plaintext-only"
, pero hay muchos problemas en el uso real, como problemas con el cursor. Podemos confiar en los componentes para solucionar estos problemas.
<div id="app">
<m-contenteditable :child="content"></m-contenteditable>
<m-contenteditable :child="content"></m-contenteditable>
<div><pre v-html="content.txt"></pre></div>
</div>
<script>
//定义一个全局组件
Vue.component("mContenteditable",{
props:{
child:{
type:Object,
default:{
txt:""
}
}
},
//数据
data:function(){
return {
innerText:this.child.txt,
lock:false
}
},
//侦听器
watch:{
child:{
handler(newValue, oldValue) {
if(!this.lock) {
this.innerText=this.child.txt;
};
},
deep:true
}
},
//改变的方法
methods:{
changeTxt:function(e){
this.child.txt=this.$el.innerHTML;
}
},
//模板
template:`<div class="box" contenteditable="true" v-html="innerText" @input="changeTxt" @focus="lock=true" @blur="lock=false"></div>`
});
new Vue({
el:"#app",
data:{
content:{
txt:"内容<img src=\"http://pub.idqqimg.com/lib/qqface/0.gif\" width=\"38\" height=\"38\">"
}
}
});