vue项目中使用可编辑div contenteditable

news/2024/7/9 23:57:04 标签: vue

<div ref="InputContainer" contenteditable="true" spellcheck="false" placeholder="文字"></div>

spellcheck 属性规定是否对元素进行拼写和语法检查 

css设置placeholder文字的颜色

*[contenteditable="true"]:empty:before {

    content: attr(placeholder);

    color: #A9A9A9;

}

this.$refs.InputContainer.innerHTML 获取div里的内容 


http://www.niftyadmin.cn/n/1866786.html

相关文章

vue的H5项目中使用@scroll滚动加载数据

<div ref"list" scroll"handleScroll"></div> created() created() { //判断是手机端和pc端 this.device() if(this.isPc true){ this.clientHeight document.documentElement.clientHeight; window.addEventListener(scroll, this.handleSc…

vue 点击按钮div input focus问题解决

<div click"clickFocus"></div> <input ref"inputbox" v-model"inputText" type"text" > methods: { clickFocus(){ this.$nextTick(() > this.$refs.inputbox.focus()); }, }

uni-app开发安卓app的封装get和post及页面使用

request.js页面如下 const baseUrl = "请求地址" //get请求 //get请求封装 export function getRequest(url,params){return new Promise((resolve, reject) => {uni.request({url: baseUrl + url,data: params,method:"GET",dataType:json,header:{…

uni-app自定义底部tabbar实现某个tab的显示和隐藏

自定义的tabbar可用v-if实现某个tab的显示和隐藏 页面 <view class"tab-box row acenter"><navigator class"grow1 column acenter jcenter" hover-class"none" url"" open-type"switchTab"><image class&…

uni-app修改swiper里dot的样式

注意&#xff1a;必须写在App.vue页面 <style>/* 首页的banner dot效果 */.home uni-swiper .uni-swiper-dot {width:6rpx;height:6rpx;}.home uni-swiper .uni-swiper-dot-active {width: 34rpx;border-radius: 20rpx;} </style>

uni-app修改checkbox样式

注意&#xff1a;必须写在App.vue页面 <style>uni-checkbox .uni-checkbox-input {border-radius: 50% !important;color: #ffffff !important; }uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked {color: #fff;background: #1953ed;} </style>

uni-app swiper实现通知上下循环滚动

swiper实现通知上下循环滚动 <template> <view><swiper circular"true" vertical"true" autoplay"true" interval"3000" duration"1000" ><swiper-item v-for"(item,index) in noticeList"…

uni-app点击复制文本

<view><text>{{copyText}}</text><view tap"copyClick">点击复制</view> </view>//适用小程序和app的点击复制 copyClick() {uni.setClipboardData({data:this.copyText,success: function (res) {uni.getClipboardData({succes…