div的contenteditable属性实现高度自适应的文本输入框(仿知乎专栏的大标题样式)

折腾 专栏收录该内容
2 篇文章 0 订阅

在做一个网页,先是用到了编辑器wangEditor3,发现标题这一块如何设置好看,里面提到知乎专栏的编辑菜单和编辑界面是分离的,就去看了,就是这样很好看:https://zhuanlan.zhihu.com/write
在这里插入图片描述而且没有边框,高度自适应,看了代码是textarea,网上找了很多都是div的contenteditable元素来控制的,就跟着使用,网上很多都一样,就发现有个问题,除了第一次加载的时候没有提示语句,之后触发点掉都是有的,就很纳闷。
不就是第一次加载没显示而已吗,我就自写一个好了,思路就是:先给div设置提示内容,并设置灰色装个模样,然后触发文本框的时候就清楚内容并设置为黑色字体的样式,不过,问题就来了,每次点到都会清除,就不行。就去搜jquery有没有一次加载的,刚好有,就是one函数,然后就解决了,网上的有很多:empty:before和:focus:before这些,我就用了前者,我发现后者不用也可以了,因为我自己装个样代替掉了,不过本来后面这个好像就没能解决第一次加载页面的问题,代码:

.textarea {
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 10px;
    /* border: 1px solid; */
    padding: 5px;
    outline: none;
}

.textarea:empty:before {
    content: "这里输入标题";
    color: rgb(169, 169, 169);
}
<div class="textarea" contenteditable="true" style="color: rgb(169, 169, 169);">这里输入标题<br /></div>

<script type="text/javascript">
	$(".textarea").one('focus', function () {
		$(this).html('')
		$(this).css('color', 'black');
	});
</script>

不简单,我的后端课设不应该老是研究这些有的无的,太浪费我时间了!!

我网上翻了好久,不能解决我问题,然后我投机取巧自行修改了一些代码,算不算原创呀?不要打我!!!


**更新!!网上有更牛批的方法,直接引用来来源: textaread高度自适应 还是因为这个提示文本的问题,后面的麻烦了,直接找了文本框省事,前面作废了我的天。。。**
  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值