当前位置: 首页 > article >正文

HTML 技巧

1.用于内联编辑的 contenteditable 属性

前端常用的输入文本内容便是input与textarea,但是有一些他们有一些局限性,比如input只能输入一行,textarea虽然可以通过设置rows属性来动态调整高度,但是他们都不能存在多种格式的内容,更不能有标签一样样式了。
浏览器对于一些dom元素有一个属性contenteditable可以快速将该元素变成可编辑的输入框

<div id="myInput" contenteditable="true">   
    这是一个子段落
</div>

contenteditable的缺陷

  • 样式难以控制:使用 contentEditable 属性时,用户可以自由编辑文本内容,这可能会导致样式混乱或不一致,尤其在不同浏览器之间表现可能会有所不同。
  • 操作dom困难,通过选区range操作选中区域进行修改元素来改变样式,会使编辑器内部元素结构混乱,没有一套标准,或者这套标准会一些缺陷
  • 安全性问题:开启 contentEditable 属性可能会带来安全隐患,因为用户可以插入不安全的脚本代码或其他恶意内容,从而导致跨站脚本攻击(XSS)等安全漏洞。
  • 兼容性问题:不同浏览器对 contentEditable 属性的支持程度各不相同,可能会导致页面在不同浏览器上表现不一致或出现兼容性问题。
  • 性能问题:当页面中有大量元素设置为可编辑时,可能会影响页面的性能,导致页面加载缓慢或卡顿。
  • 可访问性问题:对于一些特殊用户群体(如视力受损或使用辅助技术的用户),contentEditable 可能会影响页面的可访问性,导致他们无法正常使用页面。

市面上的很多编辑器其实就是基于contenteditable的属性封装改编的。

2. <input>属性

当用户在填写表格时,要确保他们提供了正确的信息。与其编写大量 JavaScript 代码,HTML5 有内置的方法可以检查这一点。可以使用 required、pattern 或 type="email" 等属性。

<form>
  <input type="email" required placeholder="Enter your email">
  <input type="text" pattern="[A-Za-z]+" title="Only letters allowed">
</form>

3.隐藏属性

有时,想隐藏页面上的某些内容,但又不想删除它。

<div hidden>这是隐藏的内容。。。</div>

4.inputmode 属性

通过 inputmode 属性,可以控制用户在移动设备上输入时看到的键盘。例如,如果想让用户输入数字,就可以确保他们获得数字键盘。

<input type="text" inputmode="numeric" placeholder="仅支持输入数字">
  • "none"无虚拟键盘。在应用程序或者站点需要实现自己的键盘输入控件时很有用。
  • "text"使用用户本地区域设置的标准文本输入键盘。
  • "decimal"小数输入键盘,包含数字和分隔符(通常是“ . ”或者“ , ”),设备可能也可能不显示减号键。
  • "numeric"数字输入键盘,所需要的就是 0 到 9 的数字,设备可能也可能不显示减号键。
  • "tel"电话输入键盘,包含 0 到 9 的数字、星号(*)和井号(#)键。表单输入里面的电话输入通常应该使用 <input type="tel"> 。
  • "search"为搜索输入优化的虚拟键盘,比如,返回键可能被重新标记为“搜索”,也可能还有其他的优化。
  • "email"为邮件地址输入优化的虚拟键盘,通常包含"@"符号和其他优化。表单里面的邮件地址输入应该使用 <input type="email"> 。
  • "url"为网址输入优化的虚拟键盘,比如,“/”键会更加明显、历史记录访问等。表单里面的网址输入通常应该使用 <input type="url"> 。
  • 如果没有设置这个属性,它的默认值是 "text",表明使用本地的标准文本输入键盘。

5.  <datalist> 元素

  • <datalist> 标签为 <input> 元素规定预定义选项的列表。
  • <datalist> 标签用于为 <input> 元素提供“自动完成”功能。用户在输入数据时,将看到预定义选项的下拉列表。
  • <datalist> 元素的 id 属性必须等于 <input> 元素的 list 属性(这会把它们绑定在一起)。
<label for="browser">请从列表中选择您的浏览器:</label>
<input list="browsers" name="browser" id="browser">

<datalist id="browsers">
  <option value="Edge">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

6.控制浏览器行为的 http-equiv 属性

<meta http-equiv="refresh" content="30">

让页面自己刷新,比如在新闻或天气网站上


http://www.kler.cn/a/348815.html

相关文章:

  • 线上问题复盘模板
  • 物联网年度“盛宴”!华普微受邀参加Silicon Labs Works With大会
  • OpenReview API | 高效检索会议论文
  • 快速理解http的get和post
  • 百果园利润暴跌收入下滑:加盟店减少88家,销售费用却大幅增长
  • MySQL事务、存储引擎
  • wifi配置文件在linux哪个目录上
  • leetcode栈与队列(一)-有效的括号
  • 12 项 ECMAScript 提案的最新进展!
  • 使用这款图片二维码生成器,快速将图片生成二维码
  • vue3--通用 popover 气泡卡片组件实现
  • RTSP推流服务搭建
  • sqli-labs less-18 http头user-agent注入
  • leetcode哈希表(二)-两个数组的交集
  • 最全上市公司企业数字创新数据集(2001-2023年)
  • 文件IO练习1
  • 数字后端零基础入门系列 | Innovus零基础LAB学习Day1
  • ansible 流程控制
  • 自然语言处理 (NLP) 的 5 个步骤
  • less和sass基本使用