首页 > 其他分享 >div contenteditable="true" 添加placehoder效果

div contenteditable="true" 添加placehoder效果

时间:2024-03-05 22:55:05浏览次数:27  
标签:contenteditable placehoder border placeholder div true overflow

<div class="contain" :style="{height: editableHeight + 'px'}"
v-html="innerText"
ref="editableDiv"
contenteditable="true"
:placeholder=placeholder
@input="inputText"
@blur="inputBlur"
@focus="inputFocus">

 

 

.contain {
width: 100%;
padding: 3px;
border: 1px solid #DCDFE6;
border-radius:4px;
font-size: 12px;
overflow-x: hidden;
overflow-y: auto;
}
.contain:empty::before {
content: attr(placeholder);
color: grey;
}

标签:contenteditable,placehoder,border,placeholder,div,true,overflow
From: https://www.cnblogs.com/shy1766IT/p/18055485

相关文章

  • css div 三张背景图片
    cssdiv宽度1300高度46,同时给它设置三张背景图片堆叠同时显示,其一图片宽度1300高度46,铺满整个div且距离最左侧偏移22px,其二图片宽度44,高度43,在div的最左端,其三图片宽度83,高度43,在div的最右端,他们同时垂直居中在div中  .container{width:1300px;height:4......
  • Codeforces Round 930 (Div. 1)
    Preface虽然难得有Div1的CF,但由于在周四晚上学校要断电就没打这两天有空去补了下发现好像错过了最适合我的一场,AB都是一眼题,C是经典图论建模,D是DS典题没有Counting我直接爽飞,不过估计现场打的话写个ABC差不多了,D的码量还是挺大的A.BitwiseOperationWizard很有意思的一个......
  • CSES1081:Common Divisors
    传送门题意:找到两个\(gcd\)最大的数。\(n\le2e5,a_i\le1e6\)。一种方法是枚举\(i:1\simn\),\(O(\sqrta_i)\)把\(a_i\)因数的出现次数加一。然后\(i:1000000\sim1\),如果\(cnt[i]>1\),输出\(i\)结束。复杂度\(O(n\sqrtV)\),\(2e8\),可惜CSES的机子跑不过。枚......
  • Codeforces Round 930 (Div. 1) C dij 建图
    离较好的方法差一点。考虑到了可以按照枚举属性并按照当前属性从小到大排序,这样可以从一个点到大另一个点。设当前在排序序列中点为\(i\)当\(i\)走向\(k,i>=k\)需要支付\(c_k\)的代价。而\(i\)到\(k,i<k\)则需\(k-i+c_k\)的代价。则对于不同的\(i\)由于代价没有连续性,当时想......
  • Codeforces Round 892 (Div. 2)
    \[\large\text{Round7:CodeforcesRound892(Div.2)(VP)}\]一言:所谓人,无论是谁到了最后,都会形单影只。——悠久之翼2最令人无语的是最后三分钟交代码的时候把\(\text{D}\)题交到了\(\text{E}\)题,结果能过的代码直接没有过。。\(\text{D:AndreyandEscapefr......
  • Codeforces Round 893 (Div. 2)
    \[\large\text{Round3:CodeforcesRound893(Div.2)(VP)}\]一言:从你站在桥上看我的那一刻起你就是我的世界——火影忍者不是很满意,还是没有突破\(\text{D}\)题,确实是没有想到这题竟然如此毒瘤。。\(\text{D:TreesandSegments}\)首先不难想到一种思路,就是枚举......
  • Codeforces Round 806 (Div. 4) A-G(补题)
    A.YESorYES?思路:一次判断三个字母是否是y、e、s的大小写即可。这题是很久前写的,哈哈,马蜂改了不少。。#include<bits/stdc++.h>usingnamespacestd;intn;chars[5];intmain(){ scanf("%d",&n); for(inti=1;i<=n;i++){ scanf("%s",s+1); if......
  • 光标自动定位到起始位置contenteditable="true" ,v-html绑定内容,div可编辑时,光标移到最
    出现这个问题原因:(1)通过打断点可以看到,当你输入的时候触发input事件,提交值给父组件中的v-model;(2)但因为在子组件中又监听了v-model的值,所以整体形成了闭环;(3)还需要重点说明的是光标问题,contenteditable与v-html所在的元素值的改变如果不是通过输入而是通过赋值实现,光标就会跑到最......
  • 16 Educational Codeforces Round 142 (Rated for Div. 2)C. Min Max Sort(递归、思维
    C.MinMaxSort很不错的一道题目,不过脑电波和出题人每对上,\(qwq。\)正难则反。我们考虑最后一步是怎么操作的。最后一步一定是对\(1\)和\(n\)进行操作那么上一步呢?上一步应该是对\(2\)和\(n-1\)以此类推第一步应该是对\(\frac{n}{2}\)和\(\frac{n}{2}+1\)我们的答案应该......
  • Educational Codeforces Round 143 (Rated for Div. 2)C. Tea Tasting(前缀和+二分、
    C.TeaTasting思路这里枚举有三种思路然后经过考虑3是最可行的,然后接着考虑如何计算贡献这里在实现的时候用了一个差分数组,因为我们需要记录第i个茶师它喝了多少个\(b_i\)以及不满\(b_i\)的用\(c_i\)记录,最后计算一下答案即可。#include<bits/stdc++.h>#defineintlon......