网页前端，同一个输入组件，可以有多个placeholder？
最近在研究微信小程序组件editor，计划参照腾讯文档，写一个用户编辑界面。我发现腾讯文档的编辑区应该只有一个editor组件，但包含了标题和正文。问题来了，他们是怎么做到两个placeholder的？标题一个placeholder、正文一个placeholder。
各位大佬可以移步腾讯文档网页版或微信小程序看看效果。
怎么实现的？请各位指教。谢谢
自定义组件呢 你有没有想过52pj回复框的placeholder为什么能是图片。
答案很简单，可以用 input框的 失焦和聚焦事件来模拟placeholder的效果。 Fullmoonbaka 发表于 2021-8-23 16:23
你有没有想过52pj回复框的placeholder为什么能是图片。
他是两个独立的placeholder哦。 两控件？或者是JS动态效果。 cqwcns 发表于 2021-8-23 16:25
他是两个独立的placeholder哦。
能单独选择吗？placeholder的特征是当你输入的时候会消失，文字没办法选中。如果把聚焦但是没有输入，placeholder也不会消失。
根据这个特征能看出来是原生placeholder还是其他技术手段模拟的。 gongyanming 发表于 2021-8-23 16:27
两控件？或者是JS动态效果。
一切表象都是同一个组件。
在正文点退格键可以删除标题，在正文全选，或者用鼠标拉选，都可以同时选择标题和正文。 Fullmoonbaka 发表于 2021-8-23 16:28
能单独选择吗？placeholder的特征是当你输入的时候会消失，文字没办法选中。如果把聚焦但是没有输入，pla ...
一切表象都是同一个组件。
在正文点退格键可以删除标题，在正文全选，或者用鼠标拉选，都可以同时选择标题和正文。 组件可以是一个组件，但是组件里的布局设计是 两个输入框， 而不是一个输入框有两个placeholder， 另外你如果希望使用同一个输入框 却显示不同的 提示文本 可以通过变量来控制，但这样使用并不合理 本帖最后由 Loker 于 2021-8-23 17:10 编辑
这不是两个DIV下的两个span吗
<div id="snap-shot-page">
<div id="content-container">
<div id="doc-editor">
<div class="surface">
<style scoped=""> .melo-leaf { font-family:"-apple-system","Helvetica Neue",Helvetica,"PingFang SC","Microsoft YaHei","Source Han Sans SC","Noto Sans CJK SC","WenQuanYi Micro Hei",sans-serif;font-size:11pt;color:#333333;letter-spacing:0pt;link-color:#1e6fff;font-weight:400;font-style:normal;text-decoration:;writing-mode:horizontal-tb;vertical-align:baseline } .image-wrapper { max-width: 100%; max-height: 100% } .melo-inline-image { width: auto !important; height: auto !important; max-width: 100%; max-height: 100%; vertical-align: middle; } .melo-line-fragment { max-width: 100% } .tdocs-doc-link-container { max-width: calc(100% - 16px) !important; } .tdocs-doc-link-container > img { visibility: hidden !important; }</style>
<div class="melo-page-view" style="background:#fff;position:relative;width:604.7600000000001px;box-shadow:0 0 10px 0 rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.04);padding-top:90.7072px;padding-left:94.48666666666666px;padding-right:94.48666666666666px;padding-bottom:90.7072px;min-height:941.1189333333333px;margin-bottom:25px;white-space:pre-wrap">
<div class="melo-section" style="position:relative">
<div class="melo-paragraph" style="text-align:left;line-height:2.21;padding-top:0px;padding-bottom:0px;text-indent:0px;margin-left:0px;margin-right:0px;word-wrap:break-word">
<div class="melo-paragraph-content">
<span class="tdocs-title-default-add-placeholder title-default-add-placeholder" style="font-family:"-apple-system","Helvetica Neue",Helvetica,"PingFang SC","Microsoft YaHei","Source Han Sans SC","Noto Sans CJK SC","WenQuanYi Micro Hei",sans-serif;font-size:24pt;font-weight:700;font-style:normal;color:#D4D4D4;text-decoration:">请输入标题</span>
<span class="melo-leaf" style="font-size:24pt;font-weight:700;color:#1A1A1A"> </span>
</div>
</div>
<div class="melo-paragraph" style="text-align:left;line-height:1.6900000000000002;padding-top:4px;padding-bottom:4px;text-indent:0px;margin-left:0px;margin-right:0px;word-wrap:break-word">
<div class="melo-paragraph-content">
<span class="tdocs-title-default-add-placeholder title-default-add-placeholder" style="font-family:"-apple-system","Helvetica Neue",Helvetica,"PingFang SC","Microsoft YaHei","Source Han Sans SC","Noto Sans CJK SC","WenQuanYi Micro Hei",sans-serif;font-size:11pt;font-weight:400;font-style:normal;color:#D4D4D4;text-decoration:">请输入正文</span>
<span class="melo-leaf"> </span>
</div>
</div>
</div>
</div>
<div class="melo-page-container-view"></div>
</div>
</div>
</div>
</div>
页:
[1]
2