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

最新推荐文章于 2022-03-08 14:38:46 发布
最新推荐文章于 2022-03-08 14:38:46 发布
阅读量921 收藏
点赞数
分类专栏： Javascript 文章标签： div
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/sl514/article/details/3630173
版权
 

加入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 972
壹说明：日常工作中，我们经常会遇到要求动态生成Word文档内容的需求，如：简历、检查书、申请书等。但是在之前Microsoft Office一直都是封闭式的体系，微软本身也未开放其生态，每年通过Office赚得盆满钵满。微软也未提供过任何开放式的接口或jdk来支持类似Word的动态生成等需求。因此这一块一直以来都令开发人员很是头疼，也出现了各种不同方式的实现，也有大神写出来可直接使用的j...
JQ文本框点击出现下拉（模糊查询，搜索框等可套用）
删库跑路
01-31 2615
点击前 点击时 点击后 html<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/css.css"/> <link rel="styles
DIV作输入框使用
leng0920的博客
08-26 1866
div加个contenteditable=true就可以当输入框 contenteditable=true>
通过css样式定义span标签实现文本输入框功能
weixin_44195615的博客
03-08 1565
<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 1188
Document &lt;style&gt; /* 块元素的特点 1.默认宽度 父元素的百分百；一致 2.霸占一行 3.支持全部样式 */ .box{ width: 100px; height: 50px; background-color: red; } span{ /* 1.行
Java面试题(4) 通过css样式定义span标签实现文本输入框功能
郑清
02-11 2359
&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 () { ...
textarea和span怎么显示在一行
xm的博客
08-06 4827
给span 和 textarea 分别套上div，然后设置两个div高度一样，宽度根据需要定，然后都folat: left就可以了，详细例子可参考： http://yayihouse.com/yayishuwu/chapter/2178 ...
android 云标签单选,div，span，表单，文本框，按钮，单选，多选，文本域，下拉菜单-----初学...
weixin_33544435的博客
05-26 255
div和span的认识div通常称为"盒子"div是大的范围，span是小的跨度div：division。范围，区域，并没有特殊的语义，经常用来布局。div 里经常放一些拥有类似或者特殊功能的标签，这就是布局过程。div 是一个典型的容器级标签，可以放任何的标签span：小区域、小跨度。---常用于小范围调整布局span 是一个文本级标签，不能放容器级标签。表单　　-----表单就是网页上提供用户...
span里面插入文字
baicheng1855的博客
03-02 2780
.text-box span::before{content:attr(data-text);} 转载于:https://www.cnblogs.com/smzd/p/8491664.html
js实现span文本选中效果
夏末、阳光依然耀眼...˜˜羽悠﹏ˇ⊙ˇ
11-13 9828
function selectText() { if (document.selection) { var range = document.body.createTextRange(); range.moveToElementText(document.getElementById('selectable'));
div模拟文本框
panying0903的专栏
08-02 4822
最近做H5页面，经常碰见实现高度自适应且计数的文本框需求，所以在这里记录一下。 其实很早之前就看了张鑫旭的“div模拟textarea文本域轻松实现高度自适应”，现在的做法也就是文章中提到的方法，主要是用到contenteditable属性。 html结构如下： 0/30 这里主要介绍下contenteditable属性：（参考https://w3c
使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;...
取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
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值