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

最新推荐文章于 2022-03-08 14:38:46 发布
最新推荐文章于 2022-03-08 14:38:46 发布 · 176 阅读 · 0

本文介绍了一种使HTML元素可编辑的方法，只需在HTML标签中加入CONTENTEDITABLE=true属性即可实现这一功能。此方法适用于需要用户直接在网页上进行内容编辑的应用场景。

加入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>

iteye_20954
关注
poi 替换文本框内容_原创 | JAVA + POI生成Microsoft Word文档
weixin_35000379的博客
01-24 1017
壹说明：日常工作中，我们经常会遇到要求动态生成Word文档内容的需求，如：简历、检查书、申请书等。但是在之前Microsoft Office一直都是封闭式的体系，微软本身也未开放其生态，每年通过Office赚得盆满钵满。微软也未提供过任何开放式的接口或jdk来支持类似Word的动态生成等需求。因此这一块一直以来都令开发人员很是头疼，也出现了各种不同方式的实现，也有大神写出来可直接使用的j...
web前端期末大作业网课设计与实现 _简单DIV布局旅游网页——简洁的旅游酒店公寓(15页)HTML+CSS+JavaScript
qq__3200628753的博客
08-15 960
🏀 精彩专栏推荐👇🏻👇🏻👇🏻 💝 【作者主页——🔥获取更多优质源码】 💝 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】🚀 旅游景点介绍、旅游风景区、家乡介绍、等网站的设计与制作。旅游景点介绍、旅游风景区是一个介绍简介、行政区划、地理环境、自然环境、教育事业、体育事业、旅游景点、城市荣誉等等。网站集中主要展示了的地方风土人情，并通过访客留言，增加游客的互动体验。同时，地方旅游网站里的每一个网页都采用了统一的设计风格，以加强城市整体面貌统一的宣传效果。最重要的......
通过css样式定义span标签实现文本输入框功能
weixin_44195615的博客
03-08 1654
<span style="width: 200px;height: 24px;line-height: 24px;font-size: 14px;padding: 5px 8px;border: 1px solid #ddd;" contenteditable="true">我是文本输入框</span>
Java面试题(4) 通过css样式定义span标签实现文本输入框功能
郑清
02-11 2454
&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可编辑富文本框及按下tab键后增加4个空格功能
踩坑小王子
02-12 5731
需求分析：最近需要制作一个简单的用户评论输入框，在网上找了一些富文本输入框，但是它们的功能太多，不适合自己的需求，于是决定自己动手实现一个简易的富文本输入框。第一步：想要实现富文本输入框并不是难事，在&lt;div&gt;标签内加入   contenteditable="true" ，这个div元素就可以编辑了，而且它的innerhtml 就是保留格式的html文本。第二步：只需要写一些css代码...
div模拟input实现输入框
热门推荐
珍妮的小罐君
03-30 3万+
因为一些原因，无意中看到了H5的全局属性contenteditable,原本不知道这个属性该用在哪里，后来发现可以用带有contenteditable属性的div而不是input或者textarea来作为输入框（div可以根据内容自动调整高度哦）。但是div它是不支持placeholder属性的。那怎么在div内容为空的时候显示一个默认文字呢？   先看下效果： 看下代码（code）...
div生成自适应的输入框
流都的博客
05-16 1336
同样是前任的坑，好好的textarea不用干吗要div模拟html：&lt;!--多行文本--&gt; &lt;div contenteditable="true" class="multipletext" placeholder="请在此填写登记内容"&gt;&lt;/div&gt;解析：带有contenteditable属性的div可作为输入框（div可以根据内容自动调整高度哦）css：.mu..
html js 校验文本框 设置span颜色字体
Liyatao_BeiJing的博客
09-01 1万+
1.给span设置提示文字 ,设置文字大小，字体颜色 var name=document.getElementById("name").value; if(name=''){ document.getElementById("warring").innerHTML='姓名不能为空'; document.getElementById("warring").style.fontSize='12p
标签span切换成可修改内容的input 详情
m_togethershare的博客
12-02 2829
今天是12月的第二天，我们一起来看看有关于标签的切换吧！ 首先先上效果图： 这里是一个span标签，关于标签的生成，这一章暂时不说，后面我会专门出一篇来介绍。 现在要实现的就是，当我们点击这个标签时，让他切换成input，可修改内容的状态，同时后面的删除标志消失，鼠标失去焦点是删除标志再次出现。 废话不多说，直接上代码，可在真机上显示效果。 引用jquery.min.js和部分css样式： &...
用DIV实现可扩展的input
u011579720的专栏
07-27 2001
我们在做前端时经常会遇到这样的需求：要求文本输入框可扩展。通常我们会想到使用textarea来代替input，但是textarea如果高度自适应时删除字符，高度不会立即改变到最小的高度。因此可以使用div来代替input。话不多说，直接上代码。以下代码完美实现了div来代替input，并模拟了input的placeholder属性。 HTML： &lt;div class="li-instea...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值