标签仿。contentEditable=‘true’，赋予非表单标签内容可以编辑</h1><div class="clear"></div><p class="post-meta"><span class="time"><i class="icon-time"></i>2022-10-20 17:48:23</span></p><div class="clear"></div></header><div class="entry" itemprop="articleBody"><p>需求：web页面需要一个文本输入框。1、该文本输入框默认状态下有个仿‘placeholder’的默认文本提示信息，2、文本框输入状态下其高度会随文本内容自动撑开。</p> <p>方案选择：1、使用<textarea>标签。但是标签高度不会随文本高度自动撑开，而是出现滚动条。使用JS动态计算文本内容高度赋予<textarea>标签高度。</p> <p>　　　　　2、使用<div>或者<p>、<span>等非表单标签，通过赋予其contentEditable='true'属性，是其获得内容可以编辑的功能，从而使标签高度随着文本内容高度自动撑开。</p> <p>遇到的问题：方案一遇到的问题此文不做讨论。</p> <p>使用contentEditable属性虽然满足的需求2，但是无法满足需求1。</p> <div> <pre class="prettyprint linenums">1 <div contentEditable='true'></div> </pre> </div> <p>　　</p> <p>解决方案：使用:before伪元素达到仿‘placeholder’的效果。</p> <p>使用css3的attr()函数。获取div标签中的‘placeholder’或者其他自定义属性'data-*'的值，赋予:before伪元素展示即可。</p> <p>当文本输入的时候，使用JS替换div标签的classname，使其没有:before伪元素，当输入框没有值得时候再替换classname，重新赋予:before伪元素，即可达到input等表单标签的placeholder效果。</p> <div> <pre class="prettyprint linenums"><div class='d' contentEditable='true' placeholder='请输入您的建议'></div><br> .d:before {<br> //有:before<br> content: attr(placeholder);<br> display: block;<br> color: #adadad;<br> } <div class='a' contentEditable='true' placeholder='请输入您的建议'></div><br> .a{<br> // 无:before<br> } </pre> </div> <p>　　</p> <p>遇到的问题：仿‘placeholder’在safari的表现不同。当用输入框内输入值后，在删除输入框，safari无法用DOM.innerText或者DOM.innerHTML的length来做判断，因为删除完后，在输入框中有一个空换行符。具体原理本人不是很懂。</p> <p>解决方案：在length的判断基础上再额外加判断条件</p> <div> <pre class="prettyprint linenums">var val=DOM.innerHTML; val.length > 0 && val != '<br>' && val != '<br/>'; var val2=DOM.innerText; val2.length > 0 && val2 != '<br>' && val2 != '<br/>' </pre> </div> <p>　　</p> <p>如果你不需要用到上面的方法可以使用DOM.textContent。safari和chrome表现相同，具体场景使用具体的API来操作。</p> <p>至于三者的区别，笔直理解不透彻，就不描述了。</p> <p>以上是纯属个人开发中遇到的问题和理解，如有错误，请谅解。</p></div><footer class="entry-meta"><div class="clear"><div class="page-nav"></div></div><div class="gpost-below mobile-no"></div></footer><div class="post-navigation">上一篇：<a href="/manong/959594.html">Maven-05：插件目标</a><p><br>下一篇：<a href="/manong/959596.html">JS回调函数（深入篇）</a></p></div></article></div><section id="related-posts" class="widget-box"><h3>相关文章</h3><div class="widget-content"><ul><li class="other-news"><span>10-20</span><a href="/manong/959595.html" title="<div>标签仿<textarea>。contentEditable=‘true’，赋予非表单标签内容可以编辑"><i class="icon-angle-right"></i><div>标签仿<textarea>。contentEditable=‘true’，赋予非表单标签内容可以编辑</a></li></ul><div class="clear"></div></div></section></div><aside class="span4 sidebar-right hide-sidebar"><div id="posts-list-widget-9" class="widget-box widget widget-posts"><div class="widget-title"><span class="icon"><i class="icon-list"></i></span><h3>编程语言最新文章</h3></div><div class="widget-content"><li ><div class="widget-thumb"><i class="icon-angle-right"></i><a href="/manong/34482.html" title="阿里云服务器怎么开启或关闭8080端口？">阿里云服务器怎么开启或关闭8080端口？</a></div></li><li ><div class="widget-thumb"><i class="icon-angle-right"></i><a href="/manong/653413.html" title="Python 爬虫IP代理池的实现">Python 爬虫IP代理池的实现</a></div></li><li ><div class="widget-thumb"><i class="icon-angle-right"></i><a href="/manong/411162.html" title="centos下nginx启动、重启、关闭">centos下nginx启动、重启、关闭</a></div></li><li ><div class="widget-thumb"><i class="icon-angle-right"></i><a href="/manong/79091.html" title="13个Mongodb GUI可视化管理工具，总有一款适合你">13个Mongodb GUI可视化管理工具，总有一款适合你</a></div></li><li ><div class="widget-thumb"><i class="icon-angle-right"></i><a href="/manong/163261.html" title="SpringBoot和SpringCloud的配置文件的加载(源码级解读)">SpringBoot和SpringCloud的配置文件的加载(源码级解读)</a></div></li><li ><div class="widget-thumb"><i class="icon-angle-right"></i><a href="/manong/1279.html" title="阿里云服务器设置教程：安装宝塔面板一步到位管理你的ECS">阿里云服务器设置教程：安装宝塔面板一步到位管理你的ECS</a></div></li><li ><div class="widget-thumb"><i class="icon-angle-right"></i><a href="/manong/22462.html" title="阿里开发者技术交流钉钉群的全向图【2019年】">阿里开发者技术交流钉钉群的全向图【2019年】</a></div></li><li ><div class="widget-thumb"><i class="icon-angle-right"></i><a href="/manong/223451.html" title="Linux基础知识——Linux常用命令大全">Linux基础知识——Linux常用命令大全</a></div></li><li ><div class="widget-thumb"><i class="icon-angle-right"></i><a href="/manong/193051.html" title="Github下载速度太慢怎么办？完美解决">Github下载速度太慢怎么办？完美解决</a></div></li><li ><div class="widget-thumb"><i class="icon-angle-right"></i><a href="/manong/449173.html" title="当 Kubernetes 遇到阿里云">当 Kubernetes 遇到阿里云</a></div></li><div class="clear"></div></div></div></aside></div></div></div><footer id="footer" class="row-fluid" role="contentinfo" itemscope=""><div class="span12 footer-nav"><ul><li><a href="/zuixin/">更多编程技术文章</a></li><li><a href="/sitemap.xml">网站地图</a></li></ul></div><div class="span12 footer-info"><p>本站所有资源皆搜集自网络，相关版权归版权持有人所有，如有侵权，请电邮告之，本站会尽快删除。<span class="email-span"></span></p><p><a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">粤ICP备2022053706号</a></p></div></footer><div class="returnTop" title="" style="display: none;"><span class="s"></span><span class="b"></span>" </div><script type="text/javascript" src="/statics/553668/js/all.js"></script></body></html>