TML 中使用 <input> 元素表示单行输入框和 <textarea> 元素表示多行文本框。
HTML中使用的 <input> 元素在 JavaScript 中对应的是 HTMLInputElement 类型。HTMLInputElement 继承自 HTMLElement 接口:
interface HTMLInputElement extends HTMLElement {
...
}
HTMLInputElement 类型有一些独有的属性和方法:
而在上述介绍 HTMLInputElement 类型中的属性时,type 属性要特别关注一下,因为根据 type 属性的改变,可以改变<input>的属性。
类型 | 描述 |
text | 文本输入 |
password | 密码输入 |
submit | 表单数据提交 |
button | 按钮 |
radio | 单选框 |
checkbox | 复选框 |
file | 文件 |
hidden | 隐藏的字段 |
image | 定义图像作为提交按钮 |
reset | 重置按钮 |
省略 type 属性与 type="text"效果一样, <input> 元素显示为文本框。
当 type 的值为text/password/number/时,会有以下属性对 <input> 元素有效。
属性 | 类型 | 描述 |
autocomplete | string | 字符串on或off,表示<input>元素的输入内容可以被浏览器自动补全。 |
maxLength | long | 指定<input>元素允许的最多字符数。 |
size | unsigned long | 表示<input>元素的宽度,这个宽度是以字符数来计量的。 |
pattern | string | 表示<input>元素的值应该满足的正则表达式 |
placeholder | string | 表示<input>元素的占位符,作为对元素的提示。 |
readOnly | boolean | 表示用户是否可以修改<input>的值。 |
min | string | 表示<input>元素的最小数值或日期。 |
max | string | 表示<input>元素的最大数值或日期。 |
selectionStart | unsigned long | 表示选中文本的起始位置。如果没有选中文本,返回光标在<input>元素内部的位置。 |
selectionEnd | unsigned long | 表示选中文本的结束位置。如果没有选中文本,返回光标在<input>元素内部的位置。 |
selectionDirection | string | 表示选中文本的方向。可能的值包括forward、backward、none。 |
下面创建一个 type="text" ,一次显示 25 个字符,但最多允许显示 50 个字符的文本框:
<input type="text" size="25" maxlength="50" value="initial value">
HTML 使用的 <textarea> 元素在 JavaScript 中对应的是 HTMLTextAreaElement 类型。HTMLTextAreaElement类型继承自 HTMLElement 接口:
interface HTMLTextAreaElement extends HTMLElement {
...
}
HTMLTextAreaElement 类型有一些独有的属性和方法:
下面创建一个高度为 25,宽度为 5 的 <textarea> 多行文本框。它与 <input> 不同的是,初始值显示在 <textarea>...</textarea> 之间:
<textarea rows="25" cols="5">initial value</textarea>
注意:处理文本框值的时候最好不要使用 DOM 方法,而应该使用 value 属性。
<input> 与 <textarea> 都支持 select() 方法,该方法用于选中文本框中的所有内容。该方法的语法为:
select(): void
下面看一个示例:
let textbox = document.forms[0].elements["input-box"];
textbox.select();
也可以在文本框获得焦点时,选中文本框的内容:
textbox.addEventListener("focus", (event) => {
event.target.select();
});
当选中文本框中的文本或使用 select() 方法时,会触发 select 事件。
let textbox = document.forms[0].elements["textbox1"];
textbox.addEventListener("select", (event) => {
console.log(`Text selected: ${textbox.value}`);
});
HTML5 对 select 事件进行了扩展,通过 selectionStart 和 selectionEnd 属性获取文本选区的起点偏移量和终点偏移量。如下所示:
function getSelectedText(textbox){
return textbox.value.substring(textbox.selectionStart,
textbox.selectionEnd);
}
注意:在 IE8 及更早版本不支持这两个属性。
HTML5 提供了 setSelectionRange() 方法用于选中部分文本:
setSelectionRange(start, end, direction): void;
下面看一个例子:
<input type="text" id="text-sample" size="20" value="Hello World!">
<button onclick="selectText()">选中部分文本</button>
<script>
function selectText() {
let input = document.getElementById("text-sample");
input.focus();
input.setSelectionRange(4, 8); // o Wo
}
</script>
如果想要看到选中效果,必须让文本框获得焦点。
不同文本框经常需要保证输入特定类型或格式的数据,或许数据需要包含特定字符或必须匹配某个特定模式。而文本框并未提供验证功能,因此要配合 JavaScript 脚本实现输入过滤功能。
有些输入框需要出现或不出现特定字符。如果想要将输入框变成只读的,只需要使用 preventDefault()方法将按键都屏蔽:
input.addEventListener("keypress", (event) => {
event.preventDefault();
});
而要屏蔽特定字符,就需要检查事件的 charCode 属性。如下所示,使用正则表达式实现只允许输入数字的输入框:
input.addEventListener("keypress", (event) => {
if (!/\d/.test(event.key)) {
event.preventDefault();
}
});
还有一个问题需要处理:复制、粘贴及涉及Ctrl 键的其他功能。在除IE 外的所有浏览器中,前面代码会屏蔽快捷键Ctrl+C、Ctrl+V 及其他使用Ctrl 的组合键。因此,最后一项检测是确保没有按下Ctrl键,如下面的例子所示:
textbox.addEventListener("keypress", (event) => {
if (!/\d/.test(String.fromCharCode(event.charCode)) &&
event.charCode > 9 &&
!event.ctrlKey){
event.preventDefault();
}
});
最后这个改动可以确保所有默认的文本框行为不受影响。这个技术可以用来自定义是否允许在文本框中输入某些字符。
IE 是第一个实现了剪切板相关的事件以及通过JavaScript访问剪切板数据的浏览器,其它浏览器在后来也都支持了相同的事件和剪切板的访问,后来 HTML5 将其纳入了规范。以下是与剪切板相关的 6 个事件:
剪切板事件的行为及相关对象会因浏览器而异。在 Safari、Chrome 和 Firefox 中,beforecopy、beforecut 和 beforepaste 事件只会在显示文本框的上下文菜单时触发,但 IE 不仅在这种情况下触发,也会在 copy、cut 和 paste 事件在所有浏览器中都会按预期触发。
在实际的事件发生之前,通过beforecopy、beforecut 和 beforepaste 事件可以在向剪贴板发送或从中检索数据前修改数据。不过,取消这些事件并不会取消剪贴板操作。要阻止实际的剪贴板操作,必须取消 copy、cut和 paste 事件。
剪贴板的数据通过 clipboardData 对象来获取,且clipboardData 对象提供 3 个操作数据的方法:
而 clipboardData 对象在 IE 中使用 window 获取,在 Firefox、Safari 和 Chrome 中使用 event 获取。为防止未经授权访问剪贴板,只能在剪贴板事件期间访问 clipboardData 对象;IE 会在任何时候都暴露 clipboardData 对象。因此,要兼容两者,最好在剪贴板事件期间使用该对象。
function getClipboardText(event){
var clipboardData = (event.clipboardData || window.clipboardData);
return clipboardData.getData("text");
}
function setClipboardText (event, value){
if (event.clipboardData){
return event.clipboardData.setData("text/plain", value);
} else if (window.clipboardData){
return window.clipboardData.setData("text", value);
}
}
如果文本框只有数字,那剪贴时,就需要使用paste事件检查剪贴板上的文本是否无效。如果无效,可以取消默认行为:
input.addEventListener("paste", (event) => {
let text = getClipboardText(event);
if (!/^\d*$/.test(text)){
event.preventDefault();
}
});
注意:Firefox、Safari和Chrome只允许在onpaste事件中访问getData()方法。
在 JavaScript 中,可以用在当前字段完成时自动切换到下一个字段的方式来增强表单字段的易用性。比如,常用手机号分为国家好加手机号。因此,我们设置 2 个文本框:
<form>
<input type="text" name="phone1" id="phone-id-1" maxlength="4">
<input type="text" name="phone2" id="phone-id-2" maxlength="11">
</form>
当文本框输入到最大允许字符数后,就把焦点移到下一个文本框,这样可以增加表单的易用性并加速数据输入。如下所示:
<script>
function tabForward(event){
let target = event.target;
if (target.value.length == target.maxLength){
let form = target.form;
for (let i = 0, len = form.elements.length; i < len; i++) {
if (form.elements[i] == target) {
if (form.elements[i+1]) {
form.elements[i+1].focus();
}
return;
}
}
}
}
let inputIds = ["phone-id-1", "phone-id-2"];
for (let id of inputIds) {
let textbox = document.getElementById(id);
textbox.addEventListener("keyup", tabForward);
}
</script>
这里,tabForward() 函数通过比较用户输入文本的长度与 maxLength 属性的值来检测输入是否达到了最大长度。如果两者相等,就通过循环表中的元素集合找到当前文本框,并把焦点设置到下一个元素。
注意:上面的代码只适用于之前既定的标记,没有考虑可能存在的隐藏字段。
HTML5 新增了一些表单提交前,浏览器会基于指定的规则进行验证,并在出错时显示适当的错误信息。而验证会基于某些条件应用到表单字段中。
表单字段中添加 required 属性,用于标注该字段是必填项,不填则无法提交。该属性适用于<input>、<textarea>和<select>。如下所示:
<input type="text" name="account" required>
也可以通过 JavaScript 检测对应元素的 required 属性来判断表单字段是否为必填项:
let isRequired = document.forms[0].elements["account"].required;
也可以检测浏览器是否支持 required 属性:
let isRequiredSupported = "required" in document.createElement("input");
注意:不同浏览器处理必填字段的机制不同。Firefox、Chrome、IE 和Opera 会阻止表单提交并在相应字段下面显示有帮助信息的弹框,而Safari 什么也不做,也不会阻止提交表单。
HTML5 为 <input> 元素增加了几个新的 type 值。如下所示:
类型 | 描述 |
number | 数字值的输入 |
date | 日期输入 |
color | 颜色输入 |
range | 一定范围内的值的输入 |
month | 允许用户选择月份和年份 |
week | 允许用户选择周和年份 |
time | 允许用户选择时间(无时区) |
datetime | 允许用户选择日期和时间(有时区) |
datetime-local | 允许用户选择日期和时间(无时区) |
电子邮件地址的输入 | |
search | 搜索(表现类似常规文本) |
tel | 电话号码的输入 |
url | URL地址的输入 |
这些输入表名字段应该输入的数据类型,并且提供了默认验证。如下所示:
<input type="email" name="email">
<input type="url" name="homepage">
要检测浏览器是否支持新类型,可以在 JavaScript 中创建 <input> 并设置 type 属性,之后读取它即可。老版本中会将我只类型设置为 text,而支持的会返回正确的值。如下所示:
let input = document.createElement("input");
input.type = "email";
let isEmailSupported = (input.type == "email");
而上面介绍的几个如 number/range/datetime/datetime-local/date/month/week/time 几个填写数字的类型,都可以指定 min/max/step 等几个与数值有关的属性。step 属性用于规定合法数字间隔,如 step="2",则合法数字应该为 0、2、4、6,依次类推。如下所示:
<input type="number" min="0" max="100" step="5" name="count">
上面的例子是<input>中只能输入从 0 到 100 中 5 的倍数。
也可以使用 stepUp() 和 stepDown() 方法对 <input> 元素中的值进行加减,它俩会接收一个可选参数,用于表示加减的数值。如下所示:
input.stepUp(); // 加1
input.stepUp(5); // 加5
input.stepDown(); // 减1
input.stepDown(10); // 减10
HTML5 还为文本添加了 pattern 属性,用于指定一个正则表达式。这样就可以自己设置 <input> 元素的输入模式了。如下所示:
<input type="text" pattern="\d+" name="count">
注意模式的开头和末尾分别假设有^和$。这意味着输入内容必须从头到尾都严格与模式匹配。
与新增的输入类型一样,指定 pattern 属性也不会阻止用户输入无效内容。模式会应用到值,然后浏览器会知道值是否有效。通过访问 pattern 属性可以读取模式:
let pattern = document.forms[0].elements["count"].pattern;
使用如下代码可以检测浏览器是否支持pattern 属性:
let isPatternSupported = "pattern" in document.createElement("input");
HTML5 新增了 checkValidity() 方法,用来检测表单中任意给定字段是否有效。而判断的条件是约束条件,因此必填字段如果没有值会被视为无效,字段值不匹配 pattern 属性也会被视为无效。如下所示:
if (document.forms[0].elements[0].checkValidity()){
// 字段有效,继续
} else {
// 字段无效
}
要检查整个表单是否有效,可以直接在表单上调用checkValidity()方法。这个方法会在所有字段都有效时返回true,有一个字段无效就会返回false:
if(document.forms[0].checkValidity()){
// 表单有效,继续
} else {
// 表单无效
}
validity 属性会返回一个ValidityState 对象,表示 <input> 元素的校验状态。返回的对象包含一些列的布尔值的属性:
因此,通过 validity 属性可以检查表单字段的有效性,从而获取更具体的信息,如下所示:
if (input.validity && !input.validity.valid){
if (input.validity.valueMissing){
console.log("请指定值.")
} else if (input.validity.typeMismatch){
console.log("请指定电子邮件地址.");
} else {
console.log("值无效.");
}
}
通过指定 novalidate 属性可以禁止对表单进行任何验证:
<form method="post" action="/signup" novalidate>
<!-- 表单元素 -->
</form>
也可以在 JavaScript 通过 noValidate 属性设置,为 true 表示属性存在,为 false 表示属性不存在:
document.forms[0].noValidate = true; // 关闭验证
如果一个表单中有多个提交按钮,那么可以给特定的提交按钮添加formnovalidate 属性,指定通过该按钮无需验证即可提交表单:
<form method="post" action="/foo">
<!-- 表单元素 -->
<input type="submit" value="注册提交">
<input type="submit" formnovalidate name="btnNoValidate"
value="没有验证的提交按钮">
</form>
也可以使用 JavaScript 设置 formNoValidate 属性:
// 关闭验证
document.forms[0].elements["btnNoValidate"].formNoValidate = true;
以上总结了 <input> 和 <textarea> 两个元素的一些功能,主要是 <input> 元素可以通过设置 type 属性获取不同类型的输入框,可以通过监听键盘事件并检测要插入的字符来控制文本框的内容。
还有一些与剪贴板相关的事件,并对剪贴的内容进行检测。还介绍了一些 HTML5 新增的属性和方法和新增的更多的 <input> 元素的类型,和一些与验证相关的属性和方法。
么是HTML / HTM文件?他们相差一个字母有什么区别吗,如何查看或编辑源代码以及如何转换成其他格式,例如DOCX,PDF,JPG 等,针对这些问题编程狮W3Cschool整理以下资料希望能对你有所帮助:
HTM / HTML 文件是超文本标记语言(Hyper Text Markup Language)文件,是 Internet 上的标准网页文件类型。
由于 HTM 文件是纯文本文件,因此它们仅包含文本(例如您现在正在阅读的内容)以及对其他外部文件的文本引用(例如本文中的配图)。
HTM 和 HTML 文件还可以引用其他文件,例如视频,CSS 或 JS 文件。
HTM 与 HTML 没有本质意义的区别,只是为了满足 DOS 仅能识别 8+3 的文件名而已,因为一些老的系统 (win32) 不能识别四位文件名,所以某些网页服务器要求 index.html 最后一个 l 不能省略。MSIE 能自动识别和打开这些文件,但编写网页地址的时候必须是完全对应的,也就是说 index.htm 和 index.html 是两个不同的文件,对应着不同的地址。值得一提的是 UNIX 系统中对大小写敏感,不吻合的话就可能报没有文件或者找不到文件。
任何 Web 浏览器,例如 Edge,Firefox,Chrome,Opera,IE,360 安全浏览器等,都可以打开并正确显示 HTM 和 HTML 文件。换句话说,在浏览器中打开这些文件并“解码(decode)” HTM 或 HTML 文件使其能正确显示。
现在有很多简化编辑和创建 HTM / HTML 文件的工具。一些著名的免费 HTML 编辑器包括 Eclipse ,Komodo Edit 和 Bluefish 。另一个流行的具有许多高级功能的 HTM / HTML 编辑器是 Adobe Dreamweaver ,不过它是收费的。
虽然 Windows 系统自带的记事本等简单的文本编辑器的功能不如专用的 HTM 编辑器那么丰富,但是对 HTM 或 HTML 文件进行简单编辑修改还是可以的。不过,W3Cschool还是建议大家使用专用的编辑器,如 WebStorm、VS Code 等,它具更多专业功能。
这是一个非常简单的 HTML 页面以文本形式显示的示例:
源码:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>什么是HTM或HTML文件? - 编程狮(w3cschool.cn)</title>
</head>
<body>
<h1>什么是HTM或HTML文件?</h1>
<p>HTM / HTML 文件是超文本标记语言(Hyper Text Markup Language)文件,是 Internet 上的标准网页文件类型。</p>
<p>由于 HTM 文件是纯文本文件,因此它们仅包含文本(例如您现在正在阅读的内容)以及对其他外部文件的文本*引用*(例如本文中的配图)。</p>
<p>HTM 和 HTML 文件还可以引用其他文件,例如视频,CSS 或 JS 文件。</p>
</body>
</html>
当 Web 浏览器呈现信息时,HTML 文件的源代码被“转换”为真实的网页(尽管源代码已很精简了)。
HTM 文件以特定的语法(规则)构成,以使其中的代码和文本在浏览器中打开时能够正确显示。因此,将 HTM / HTML 文件转换为另一种格式可能会丢失页面上的所有功能。
如果你想要做的是将一个 HTM / HTML 文件转换为方便离线查看的文件,这时图片或 PDF 格式会方便很多。
在 Chrome 中,鼠标右键单击网页,出现的选项菜单中进入 “打印(P)...”(快捷键:CTRL + P) ,在打印选项中选择另存为 PDF,以将窗口中的页面转换为 PDF 文件。Chrome 浏览器的扩展功能也称为“全屏截屏”,可将 Chrome 浏览器中所有打开的 HTM / HTML 文件转换为 PNG 文件。
其他浏览器具有类似的功能,例如 Firefox 的 “另存为 PDF” 加载项。
您也可以使用专门用于 HTM / HTML 进行图像文件转换的网站,例如iWeb2Shot 或Web-capture 。
一个免费的文件转换器可以用来转换并保存 HTM / HTML 文件到您的计算机。如 FileZigZag 是一个免费的文档转换器网站,可将 HTM 转换为RTF,EPS,CSV,PDF 和许多其他格式。
HTM / HTML 文件不能转换为文本文件格式以外的任何格式。例如,HTML 文件永远不能转换为 MP3 音频文件。
HTML / HTM 文件应该很容易打开,因为它们只是任何 Web 浏览器都可以查看的文本文件。如果您的文件没有从上面建议的任何程序打开,则很有可能正在打开的这个文件并非超文本标记语言文件。
某些文件格式使用的文件扩展名与 HTML / HTM 非常相似,但实际上并非相同。一个主要的示例是用于压缩 HTML 电子书文件的 HTMLZ 文件扩展名。有 HTML 文件在内的 HTMLZ 文件,但整个包的格式为 ZIP,不会在 Web 浏览器或文本编辑器打开。
在此示例中,您需要特定的 HTMLZ 文件查看器,例如Caliber 。或者,由于此文件格式实际上是存档,因此您可以使用 7-Zip 之类的文件解压缩器将其打开,然后您可以使用网络浏览器或上述任何其他 HTML 查看器/编辑器打开任何单独的 HTML 文件。
TMLANGUAGE 是另一个可能与 HTML / HTM 文件混淆的文件扩展名。这些实际上是TextMate 用于 macOS 的 TextMate 语言语法文件。
以上就是编程狮W3Cschool为你整理的关于《什么是HTM或HTML文件?如何打开、编辑和转换HTM和HTML文件?》的全部内容,现希望可以帮到你~
TML编辑器 复制WORD里面带图文的文章,图片可以直接显示,JSP – 支持WORD上传的富文本编辑器,EWEBEDITOR 从WORD中复制内容带多张图片,如何从WORD文档复制公式到富文本编辑器,复制word图片,从word中复制图片,
从word中粘贴图片,粘贴word内容,粘贴word图片,粘贴word图文,复制粘贴word文档,复制粘贴word图片,复制粘贴word图文,复制粘贴word内容,
之前在网上找过相关的资料,论坛里面也有网友交流过,还加过不少QQ群和微信群,但是结果都不太令人满意。相关的文章提问的人多,能够给出方案的人少,能够给出成熟产品的就更少了,说的直接一点根本就没有,纯属浪费时间。要示例没示例,要代码没代码,根本就用不了,
有几个方面的原因吧,一个是网上的资料提的一些都是开源的方案,也不是说开源的方案不行,关键是提到的这些方案,公司项目组去评估发现联系不到开发人员,而且方案本身也停止更新了,处于没有人维护的状态,所以项目组这边不太敢用。主要是之前在这块也踩过坑。
客户那边也不差这点钱,之前公司项目组就是在这块踩过坑,用了开源的方案,客户那边提了一个新需求,但是由于项目组对产品本身并不熟悉,导致没办法进行二次开发。
从word中复制图片和文字内容,然后粘贴到web富文本编辑器中,粘贴后word图片自动上传到web服务器中,自动将图片和文字HTML添加到编辑器中,保留word中的文字格式,文字颜色,字体,样式,
用户发布新闻的时候是从word里面复制图片和文字,然后将word图文内容粘贴到web富文本编辑器中,希望能够将word的图片自动上传到服务器中,服务器地址能够自定义,
后端的话需要支持任意开发语言,比如ASP,ASP.NET,JSP,PHP,PYTHON等。只要是基于标准HTTP协议的都要支持。如果能够不装控件最好,视频教程:https://www.ixigua.com/7233953214108795407
1.下载示例:
http://www.ncmem.com/webapp/wordpaster/versions.aspx
2.复制WordPaster插件目录
3.引入插件文件
注意:不要重复引入jquery,如果您的项目已经引入了jq,则不用再引入jq-1.4
4.在工具栏中增加插件按钮
6.初始化控件
注意:
1.如果接口字段名称不是file,请配置FileFieldName。ueditor接口中使用的upfile字段
参考:http://www.ncmem.com/doc/view.aspx?id=c3ad06c2ae31454cb418ceb2b8da7c45
2.如果接口返回JSON,请配置ImageMatch
参考:http://www.ncmem.com/doc/view.aspx?id=07e3f323d22d4571ad213441ab8530d1
3.如果接口返回的图片地址没有域名,请配置ImageUrl
参考:http://www.ncmem.com/doc/view.aspx?id=704cd302ebd346b486adf39cf4553936
4.如果接口有权限验证(登陆验证,SESSION验证),请配置COOKIE。或取消权限验证。
参考:http://www.ncmem.com/doc/view.aspx?id=8602DDBF62374D189725BF17367125F3
效果
订阅版报价单:https://drive.weixin.qq.com/s?k=ACoAYgezAAw70JsA8m
政企版报价单:https://drive.weixin.qq.com/s?k=ACoAYgezAAwuqJtN30#/
年费版报价单:https://drive.weixin.qq.com/s?k=ACoAYgezAAwFouDIB4#/
OEM版报价单:https://drive.weixin.qq.com/s?k=ACoAYgezAAwV00mQSY
产品源代码:https://drive.weixin.qq.com/s?k=ACoAYgezAAwz13B5Tr
授权码生成器:https://drive.weixin.qq.com/s?k=ACoAYgezAAwzYuEEY1
*请认真填写需求信息,我们会在24小时内与您取得联系。