码上快乐
1秒登录
首页
榜单
标签
关于
搜索
文章详情
原文：
标签仿
。contentEditable=‘true’，赋予非表单标签内容可以编辑</a></h3> <p>需求：web页面需要一个文本输入框。 该文本输入框默认状态下有个仿 placeholder 的默认文本提示信息， 文本框输入状态下其高度会随文本内容自动撑开。 方案选择： 使用 lt textarea gt 标签。但是标签高度不会随文本高度自动撑开，而是出现滚动条。使用JS动态计算文本内容高度赋予 lt textarea gt 标签高度。 使用 lt div gt 或者 lt p gt lt sp ...</p> <p> <i class="icon-time"></i> <span>2017-09-15 16:55</span> <i class="icon-envelope"></i> <span>1</span> <i class="icon-eye-open"></i> <span>10282</span> 推荐指数： <i class="icon-star" title="9.8539"></i> <i class="icon-star" title="9.8539"></i> <i class="icon-star" title="9.8539"></i> <i class="icon-star" title="9.8539"></i> <i class="icon-star" title="9.8539"></i> </p> <p><a class="btn btn-warning btn-primary" href="/blog/72db6b1.html">查看详情</a></p> </div> <div class="page-header"><h3><small><i class="icon-list"></i>相关推荐</small></h3></div> <article class="post-item" style="border-bottom:1px dotted #f2f2f2;padding-bottom:10px;"> <div class="post-item-body"> <div class="post-item-text"> <a class="post-item-title" href="/blog/8deb071.html" target="_blank">关于vue2<B>非</B><B>表单</B>元素使用<B>contenteditable</B>="<B>true</B>"实现<B>textarea</B>高度自适应</a> <p class="post-item-summary"> 参考文章： https://segmentfault.com/a/1190000012146952 ... </p> </div> <footer class="post-item-foot"> <i class="icon-time"></i> <span>Fri Jul 13 01:39:00 CST 2018</span> <i class="icon-envelope"></i> <span>0</span> <i class="icon-eye-open"></i> <span>900</span> <i class="icon-star"></i> </footer> </div> </article> <article class="post-item" style="border-bottom:1px dotted #f2f2f2;padding-bottom:10px;"> <div class="post-item-body"> <div class="post-item-text"> <a class="post-item-title" href="/blog/e998bb1.html" target="_blank">使用 <B>div</B> <B>标签</B> <B>contenteditable</B>="<B>true</B>" 实现一个 聊天框,支持 Ctrl + v 粘贴图片</a> <p class="post-item-summary"> 框,可以输入文字,也可以粘贴图片 <B>contenteditable</B>=”<B>true</B>” js 实现去格式粘贴 利 ... </p> </div> <footer class="post-item-foot"> <i class="icon-time"></i> <span>Sat Sep 18 23:44:00 CST 2021</span> <i class="icon-envelope"></i> <span>0</span> <i class="icon-eye-open"></i> <span>99</span> <i class="icon-star"></i> </footer> </div> </article> <article class="post-item" style="border-bottom:1px dotted #f2f2f2;padding-bottom:10px;"> <div class="post-item-body"> <div class="post-item-text"> <a class="post-item-title" href="/blog/b8a1bf1.html" target="_blank">input、<B>textarea</B>、<B>div</B>(<B>contenteditable</B>=<B>true</B>)光标定位到最后</a> <p class="post-item-summary"> 1、针对input、<B>textarea</B> ... </p> </div> <footer class="post-item-foot"> <i class="icon-time"></i> <span>Thu Dec 26 11:11:00 CST 2019</span> <i class="icon-envelope"></i> <span>0</span> <i class="icon-eye-open"></i> <span>845</span> <i class="icon-star"></i> </footer> </div> </article> <article class="post-item" style="border-bottom:1px dotted #f2f2f2;padding-bottom:10px;"> <div class="post-item-body"> <div class="post-item-text"> <a class="post-item-title" href="/blog/3654641.html" target="_blank">input、<B>textarea</B>、<B>div</B>(<B>contenteditable</B>=<B>true</B>)光标定位到最后</a> <p class="post-item-summary"> 1、针对input、<B>textarea</B> 2、针对<B>div</B>(<B>contenteditable</B>="<B>true</B>") ... </p> </div> <footer class="post-item-foot"> <i class="icon-time"></i> <span>Sat Feb 22 19:03:00 CST 2014</span> <i class="icon-envelope"></i> <span>0</span> <i class="icon-eye-open"></i> <span>9471</span> <i class="icon-star"></i> <i class="icon-star"></i> <i class="icon-star"></i> <i class="icon-star"></i> </footer> </div> </article> <article class="post-item" style="border-bottom:1px dotted #f2f2f2;padding-bottom:10px;"> <div class="post-item-body"> <div class="post-item-text"> <a class="post-item-title" href="/blog/60034d1.html" target="_blank"><B>DIV</B><B>仿</B><B>textarea</B>文本域，<B>contenteditable</B>如何只能输入纯文本</a> <p class="post-item-summary"> 对于支持HTML5浏览器有2种方法： 1. HTML5 2. CSS3 <B>非</B>HTML5浏览器，参考以下JS 总结参考：http://www.cnblogs.com/sheshou/p/5416885.html . ... </p> </div> <footer class="post-item-foot"> <i class="icon-time"></i> <span>Tue Jan 17 19:20:00 CST 2017</span> <i class="icon-envelope"></i> <span>0</span> <i class="icon-eye-open"></i> <span>1537</span> <i class="icon-star"></i> </footer> </div> </article> <article class="post-item" style="border-bottom:1px dotted #f2f2f2;padding-bottom:10px;"> <div class="post-item-body"> <div class="post-item-text"> <a class="post-item-title" href="/blog/61d5ed1.html" target="_blank"><B>contenteditable</B>实现可<B>编辑</B>的HTML<B>标签</B></a> <p class="post-item-summary"> 最近工作中遇到了一个小问题，让我学到了新的<B>标签</B>属性——<B>contenteditable</B>。 我需要实现的是手机端界面，特别简单的一个页面，如下图； 在我脑海里第一时间想到的应该就是一个form<B>表单</B>然后里面包裹着一个<B>textarea</B><B>标签</B>这么简单吧，心想着这个界面顶多用十分钟就能搞定 ... </p> </div> <footer class="post-item-foot"> <i class="icon-time"></i> <span>Sat Feb 18 06:32:00 CST 2017</span> <i class="icon-envelope"></i> <span>0</span> <i class="icon-eye-open"></i> <span>5104</span> <i class="icon-star"></i> <i class="icon-star"></i> <i class="icon-star"></i> <i class="icon-star"></i> </footer> </div> </article> <article class="post-item" style="border-bottom:1px dotted #f2f2f2;padding-bottom:10px;"> <div class="post-item-body"> <div class="post-item-text"> <a class="post-item-title" href="/blog/733cd11.html" target="_blank">html 之<B>表单</B>，<B>div</B><B>标签</B>等。。。。。。。</a> <p class="post-item-summary"> 一、<B>表单</B> 功能：<B>表单</B>用于向服务器传输数据，从而实现用户与Web服务器的交互 <B>表单</B>能够包含input系列<B>标签</B>，比如文本字段、复选框、单选框、提交按钮等等。 <B>表单</B>还可以包含<B>textarea</B>、select、fieldset和 label<B>标签</B>。 <B>表单</B>属性 ... </p> </div> <footer class="post-item-foot"> <i class="icon-time"></i> <span>Tue Sep 19 23:47:00 CST 2017</span> <i class="icon-envelope"></i> <span>0</span> <i class="icon-eye-open"></i> <span>3633</span> <i class="icon-star"></i> <i class="icon-star"></i> <i class="icon-star"></i> </footer> </div> </article> <article class="post-item" style="border-bottom:1px dotted #f2f2f2;padding-bottom:10px;"> <div class="post-item-body"> <div class="post-item-text"> <a class="post-item-title" href="/blog/945b6e1.html" target="_blank">PHP <B>textarea</B><B>标签</B><B>内容</B>原样输出</a> <p class="post-item-summary"> 原文链接:https://blog.csdn.net/weixin_36392359/article/details/79086404 <style>pre {white-space: ... </p> </div> <footer class="post-item-foot"> <i class="icon-time"></i> <span>Sat Sep 29 19:21:00 CST 2018</span> <i class="icon-envelope"></i> <span>0</span> <i class="icon-eye-open"></i> <span>773</span> <i class="icon-star"></i> </footer> </div> </article> </div> </div> <div class="span4 left_content"> <div class="page-header"><h3><small><i class="icon-tag"></i>相关标签</small></h3></div> <ul class="nav nav-pills"> <li class="tag-item"><a class="btn-link" href='/tag/vue' target="_blank">vue(684)</a></li> <li class="tag-item"><a class="btn-link" href='/tag/前端' target="_blank">前端(641)</a></li> <li class="tag-item"><a class="btn-link" href='/tag/JavaScript' target="_blank">JavaScript(614)</a></li> <li class="tag-item"><a class="btn-link" href='/tag/js' target="_blank">js(565)</a></li> <li class="tag-item"><a class="btn-link" href='/tag/javascript' target="_blank">javascript(559)</a></li> <li class="tag-item"><a class="btn-link" href='/tag/HTML' target="_blank">HTML(498)</a></li> <li class="tag-item"><a class="btn-link" href='/tag/java' target="_blank">java(437)</a></li> <li class="tag-item"><a class="btn-link" href='/tag/html' target="_blank">html(430)</a></li> <li class="tag-item"><a class="btn-link" href='/tag/Java' target="_blank">Java(429)</a></li> <li class="tag-item"><a class="btn-link" href='/tag/css' target="_blank">css(428)</a></li> <li class="tag-item"><a class="btn-link" href='/tag/python' target="_blank">python(418)</a></li> <li class="tag-item"><a class="btn-link" href='/tag/CSS' target="_blank">CSS(416)</a></li> <li class="tag-item"><a class="btn-link" href='/tag/Linux' target="_blank">Linux(413)</a></li> <li class="tag-item"><a class="btn-link" href='/tag/C＃' target="_blank">C#(351)</a></li> <li class="tag-item"><a class="btn-link" href='/tag/Python' target="_blank">Python(334)</a></li> <li class="tag-item"><a class="btn-link" href='/tag/linux' target="_blank">linux(320)</a></li> <li class="tag-item"><a class="btn-link" href='/tag/Vue' target="_blank">Vue(308)</a></li> <li class="tag-item"><a class="btn-link" href='/tag/jquery' target="_blank">jquery(244)</a></li> <li class="tag-item"><a class="btn-link" href='/tag/jQuery' target="_blank">jQuery(237)</a></li> <li class="tag-item"><a class="btn-link" href='/tag/PHP' target="_blank">PHP(213)</a></li> <li class="tag-item"><a class="btn-link" href='/tag/Android' target="_blank">Android(213)</a></li> <li class="tag-item"><a class="btn-link" href='/tag/JS' target="_blank">JS(194)</a></li> <li class="tag-item"><a class="btn-link" href='/tag/php' target="_blank">php(189)</a></li> <li class="tag-item"><a class="btn-link" href='/tag/Javascript' target="_blank">Javascript(160)</a></li> <li class="tag-item"><a class="btn-link" href='/tag/HTML5' target="_blank">HTML5(157)</a></li> </ul> <div id="right_float_ad" class="ad"> </div> </div> </div> </div> <div class="clear"> </div> <div class="fbar" style="z-index:100"> <div class="span7" style="color:grey;font-size:12px;"> </div> <div class="pull-right"> <span><a href="http://beian.miit.gov.cn" rel="nofollow" target="_blank">粤ICP备18138465号</a> </span><span>© 2018-2025 CODEPRJ.COM </span> </div> </div> <script src="/js/code.js?version=20250602"></script> <script> function buffer(a, b, c) { var d; return function() { if (d) return; d = setTimeout(function() { a.call(this), d = undefined }, b) } } (function() { function e() { var d = document.body.scrollTop || document.documentElement.scrollTop; d > b ? (a.className = "div1 div2", c && (a.style.top = d - b + "px")) : a.className = "div1" } var a = document.getElementById("float"); if (a == undefined) return ! 1; var b = 0, c, d = a; while (d) b += d.offsetTop, d = d.offsetParent; c = window.ActiveXObject && !window.XMLHttpRequest; if (!c || !0) window.onscroll = buffer(e, 50, this) })(); </script> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?85c5e8e7b6167edfc87cb0607142e870"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </body> </html>
