超级变态让div span dd可以当文本框用

最新推荐文章于 2022-03-08 14:38:46 发布
原创 最新推荐文章于 2022-03-08 14:38:46 发布 · 956 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#div

本文介绍了一种在HTML元素中使用CONTENTEDITABLE属性的方法，使指定的HTML元素变为可编辑的状态，这对于创建富文本编辑器或其他需要用户直接修改页面内容的应用场景非常有用。
 

加入CONTENTEDITABLE="true"  就欧了

<dl  >
    <dd CONTENTEDITABLE="true" id="dd1">111</dd>
    <dd CONTENTEDITABLE="true">111</dd>
    <dd CONTENTEDITABLE="true">111</dd>
    <dd CONTENTEDITABLE="true">111</dd>
    <dd CONTENTEDITABLE="true">111</dd>
    <dd CONTENTEDITABLE="true">111</dd>
    <dd CONTENTEDITABLE="true">111</dd>
    <dd CONTENTEDITABLE="true" >111</dd>
   </dl>

poi 替换文本框内容_原创 | JAVA + POI生成Microsoft Word文档
weixin_35000379的博客
01-24 1029
壹说明：日常工作中，我们经常会遇到要求动态生成Word文档内容的需求，如：简历、检查书、申请书等。但是在之前Microsoft Office一直都是封闭式的体系，微软本身也未开放其生态，每年通过Office赚得盆满钵满。微软也未提供过任何开放式的接口或jdk来支持类似Word的动态生成等需求。因此这一块一直以来都令开发人员很是头疼，也出现了各种不同方式的实现，也有大神写出来可直接使用的j...
web前端期末大作业网课设计与实现 _简单DIV布局旅游网页——简洁的旅游酒店公寓(15页)HTML+CSS+JavaScript
qq__3200628753的博客
08-15 962
🏀 精彩专栏推荐👇🏻👇🏻👇🏻 💝 【作者主页——🔥获取更多优质源码】 💝 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】🚀 旅游景点介绍、旅游风景区、家乡介绍、等网站的设计与制作。旅游景点介绍、旅游风景区是一个介绍简介、行政区划、地理环境、自然环境、教育事业、体育事业、旅游景点、城市荣誉等等。网站集中主要展示了的地方风土人情，并通过访客留言，增加游客的互动体验。同时，地方旅游网站里的每一个网页都采用了统一的设计风格，以加强城市整体面貌统一的宣传效果。最重要的......
DIV作输入框使用
leng0920的博客
08-26 1905
div加个contenteditable=true就可以当输入框 contenteditable=true>
通过css样式定义span标签实现文本输入框功能
weixin_44195615的博客
03-08 1656
<span style="width: 200px;height: 24px;line-height: 24px;font-size: 14px;padding: 5px 8px;border: 1px solid #ddd;" contenteditable="true">我是文本输入框</span>
HTML5中div、p、ol、li、ul、dl、dd、form、span的使用案例
大数据-攻城狮
12-14 1358
Document &lt;style&gt; /* 块元素的特点 1.默认宽度 父元素的百分百；一致 2.霸占一行 3.支持全部样式 */ .box{ width: 100px; height: 50px; background-color: red; } span{ /* 1.行
Java面试题(4) 通过css样式定义span标签实现文本输入框功能
郑清
02-11 2487
&lt;span&gt;我是文本输入框&lt;/span&gt; 通过css样式定义span标签实现文本输入框功能: &lt;span style="width: 200px;height: 24px;line-height: 24px;font-size: 14px;padding: 5px 8px;border: 1px solid #ddd;" contenteditable="true"...
两种方法实现日期时间加入文本框的JS控件
05-20
在JavaScript编程中，将日期和时间插入到文本框（input type="text"）是一种常见的需求，这主要用于创建交互式的用户界面，例如日历选择器或时间输入控件。本篇文章将详细探讨两种实现这一功能的方法。 ### 方法一...
打开网页时用文本显示“当前日期：****年**月**日”， 文本下面设计只读文本框，标签为“当前时间：”，在文本框中显示当前的精确到秒 的时间。文本框下面为两个按钮，“开始计时”和“结束计时”，点击“开始计时” 按钮，文本框中以秒计时；点击“结束计时”，停止计时，
11-18
const date = moment().format('YYYY年MM月DD日 HH:mm:ss'); currentDate.textContent = date.split(' ')[0]; currentTime.value = date; } // 开始计时 function startTimer() { if (timerInterval) return; /...
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>02</title> <link href="bootstrap.min.css" rel="stylesheet"> <style> .bg { overflow: hidden; background-color: beige; } </style> </head> <body> <section class="bg"> <div class="container col-sm-12"> <div class="col-sm-4 col-sm-offset-4" autocomplete="off"> <fieldset> <legend style="color: #0e0e0e">注 册</legend> <div class="form-group"> <label for="passwordField">Password</label> <input type="password" name="passwordField" id="passwordField" class="form-control" required='required'/> </div> </fieldset> <div> <button type="button" class="btn btn-primary btn-validate">验证</button> <span>   强度等级：</span> <span class="result">未验证</span> </div> </div> </div> <div class="container col-sm-12"> <br/> <div class="col-sm-12 col-sm-offset-4"> <p><strong>你填写的密码的强度等级按如下划分：</strong></p> <dl> <dt>低：</dt> <ol> <li>密码必须大于 8 个字符</li> </ol> <dt>中（在满足低强度要求的前提下，需要满足以下需求）：</dt> <dd> <ol> <li>至少需要一个小写字母</li> <li>至少需要一个数字</li> </ol> </dd> <dt>高（在满足中强度要求的前提下，需要满足以下需求）：</dt> <dd> <ol> <li>至少需要一个大写字母</li> <li>至少需要一个（除数字和字母外的）特殊字符</li> </ol> </dd> </dl> </div> </div> </section> <script src="jquery.min.js"></script> <script> // 请在这里补充代码，实现密码强度的验证 document.getElementById('passwordField').addEventListener('input', function() { const pwd = this.value; let strengthIndicator = document.querySelector('result'); // 定义匹配模式 var hasLowercase = /[a-z]/.test(pwd); var hasUppercase = /[A-Z]/.test(pwd); var hasNumber = /\d/.test(pwd); var hasSpecialChar = /[\W_]/.test(pwd); // 计算满足条件的数量 var conditionsMetCount = [ hasLowercase, hasUppercase, hasNumber, hasSpecialChar].filter(Boolean).length; // 判断强度等级 if (conditionsMetCount >= 3 && pwd.length >= 8){ strengthIndicator.textContent = 'Strong'; strengthIndicator.style.color = '#27ae60';//绿色表示强壮 } else if ((hasLowercase || hasUppercase) && hasNumber && pwd.length >= 6){ strengthIndicator.textContent = 'Medium'; strengthIndicator.style.color = '#f39c12';//橙色表示适中 } else{ strengthIndicator.textContent = 'Weak'; strengthIndicator.style.color = '#e74c3c';//红色表示脆弱 } }); </script> </body> </html>
最新发布
03-10
2. 您设定的颜色值可以考虑使用更易识别的颜色名称或者是十六进制RGB格式。 以下是改进后的JS代码版本： ```javascript document.getElementById('passwordField').addEventListener('input', function () { ...
使div，span等标签变为可以编辑里面的内容
Love666Code的博客
05-18 1万+
使div，span等标签变为可以编辑里面的内容，只需要设置属性contenteditable=”true”就可以了。 如 &lt;span contenteditable="true"&gt;昵称&lt;/span&gt; &lt;div contenteditable="true"&gt;昵称&lt;/div&gt;...
js实现span文本选中效果
夏末、阳光依然耀眼...˜˜羽悠﹏ˇ⊙ˇ
11-13 9923
function selectText() { if (document.selection) { var range = document.body.createTextRange(); range.moveToElementText(document.getElementById('selectable'));
span里面插入文字
baicheng1855的博客
03-02 2819
.text-box span::before{content:attr(data-text);} 转载于:https://www.cnblogs.com/smzd/p/8491664.html
取span的文本和value值
热门推荐
欲寄彩笺兼尺素，山高水阔知何处
10-19 1万+
JQ和Js获取span标签的内容   html: 1 span id="content">‘我是span标签的内容’span>   javascript获取: 1 var cont=document.getElementById("content"); 2 console.log('innerText cont= '+ cont.innerText); 3 c
textarea和span怎么显示在一行
xm的博客
08-06 4864
给span 和 textarea 分别套上div，然后设置两个div高度一样，宽度根据需要定，然后都folat: left就可以了，详细例子可参考： http://yayihouse.com/yayishuwu/chapter/2178 ...
android 云标签单选,div，span，表单，文本框，按钮，单选，多选，文本域，下拉菜单-----初学...
weixin_33544435的博客
05-26 280
div和span的认识div通常称为"盒子"div是大的范围，span是小的跨度div：division。范围，区域，并没有特殊的语义，经常用来布局。div 里经常放一些拥有类似或者特殊功能的标签，这就是布局过程。div 是一个典型的容器级标签，可以放任何的标签span：小区域、小跨度。---常用于小范围调整布局span 是一个文本级标签，不能放容器级标签。表单　　-----表单就是网页上提供用户...
div模拟文本框
panying0903的专栏
08-02 4875
最近做H5页面，经常碰见实现高度自适应且计数的文本框需求，所以在这里记录一下。 其实很早之前就看了张鑫旭的“div模拟textarea文本域轻松实现高度自适应”，现在的做法也就是文章中提到的方法，主要是用到contenteditable属性。 html结构如下： 0/30 这里主要介绍下contenteditable属性：（参考https://w3c
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值