1### Menu
第14章 表单脚本
14.1 表单的基础知识
- 14.1.1 提交表单
- 14.1.2 重置表单
- 14.1.3 表单字段
14.2 文本框脚本
- 14.2.1 选择文本
- 14.2.2 过滤输入
- 14.2.3 自动切换焦点
- 14.2.4 HTML5 约束验证API
14.3 选择框脚本
14.4 表单序列化
14.5 富文本编辑
- 14.5.1 使用contenteditable属性
- 14.5.2 操作富文本
- 14.5.3 富文本选区
- 14.5.4 表单与富文本
14.1 表单的基础知识
- 在 HTML中，表单是由<form>元素来表示的, 而在 JavaScript 中，表单对应的则是 HTMLFormElement 类型。HTMLFormElement 继承了 HTMLElement，因而与其他 HTML 元素具有相同的默认属性。
- 注意，可以同时为表单指定 id 和 name 属性，但它们的值不一定相同。
- 取得<form>元素引用的方式有好几种:
- 最常见的方式就是将它看成与其他元素一样，并为其添加 id 特性，然后再像下面这样使用 getElementById()方法找到它。
- 通过 document.forms 可以取得页面中所有的表单。在这个集合中，可以通过数值索引或
name 值来取得特定的表单
var firstForm = document.forms[0]; //取得页面中的第一个表单
var myForm = document.forms["form2"]; //取得页面中名称为"form2"的表单
- 14.1.1 提交表单
<!-- 通用提交按钮 -->
<input type="submit" value="suBmit">
<!-- 自定义提交按钮 -->
<button type="submit">Submit Form</button>
<!-- 图像按钮 -->
<input type="image" src="box.jpg" width="100px" height="100px">
- 只要表单中存在上面列出的任何一种按钮，那么在相应表单控件拥有焦点的情况下，按回车键就可以提交该表单。（textarea 是一个例外，在文本区中回车会换行。）如果表单里没有提交按钮，按回车
键不会提交表单。 - 以这种方式提交表单时，浏览器会在将请求发送给服务器之前触发 submit 事件。这样，我们就有机会验证表单数据，并据以决定是否允许表单提交。阻止这个事件的默认行为就可以取消表单提交。例
如，下列代码会阻止表单提交。 - from按钮可以直接提交表单， 不用submit按钮 form.submit();
<form id="myForm" action="http://132.232.51.128/cgi-bin/tutor3.py" target="_blank">
<span>name</span><input id="nameInput" type="text" name="name">
<span>age</span><input id="ageInput" type="text" name="age">
<input id="mySubmit" type="submit" value="suBmit"> <!-- 通用提交按钮 -->
</form>
<script>
function getValue(event){
// 阻止submit的默认行为，也就是不提交；
event.preventDefault();
// 以下都是拿到有name的input，用来判断用户输入的数据，如果
formchildren = event.target.parentNode.children; /
for (i=0, len=formchildren.length; i<len; i++){
if (formchildren[i].name){
//判断数据
// 如果数据OK。那就调用form对象的submit方法.
// form.submit()
}
}
}
form = document.getElementById("myForm");
nameInput = document.getElementById("nameInput");
ageInput = document.getElementById("ageInput");
mySubmit = document.getElementById("mySubmit");
mySubmit.addEventListener("click", getValue, false);
</script>
- 14.1.2 重置表单
- 这两个按钮都可以用来重置表单。
<!-- 通用重置按钮 -->
<input type="reset" value="Reset Form">
<!-- 自定义重置按钮 -->
<button type="reset">Reset Form</button>
- 14.1.3 表单字段
- 每个表单都有elements属性
- 单中所有表单元素（字段）的集合。这个 elements 集合是一个有序列表，其中包含着表单中的所有字段，例如<input>、 <textarea>、 <button>和<fieldset>。每个表单字段在 elements 集合中的顺序，与它们出现在标记中的顺序相同，可以按照位置和 name 特性来访问它们。
- 如果有几个form element的name是同名的，那么就会返回一个NodeList；
fe = event.target.elements
alert(fe["name"])
// 会返回一个NodeList对象，里面包括所有有name属性的form element；
var form = document.getElementById("form1");
//取得表单中的第一个字段
var field1 = form.elements[0];
//取得名为"textbox1"的字段
var field2 = form.elements["textbox1"];
//取得表单中包含的字段的数量
var fieldCount = form.elements.length;
- 1. 共有的表单字段属性
- 除了<fieldset>元素之外，所有表单字段都拥有相同的一组属性。由于<input>类型可以表示多种表单字段，因此有些属性只适用于某些字段，但还有一些属性是所有字段所共有的。表单字段共有的
属性如下。- disabled：布尔值，表示当前字段是否被禁用。
- form：指向当前字段所属表单的指针；只读。
- name：当前字段的名称。
- readOnly：布尔值，表示当前字段是否只读。
- tabIndex：表示当前字段的切换（tab）序号。
- type：当前字段的类型，如"checkbox"、 "radio"，等等。
- value：当前字段将被提交给服务器的值。对文件字段来说，这个属性是只读的，包含着文件在计算机中的路径。
- 除了 form 属性之外，可以通过 JavaScript 动态修改其他任何属性。
var form = document.getElementById("myForm");
var field = form.elements[0];
//修改 value 属性
field.value = "Another value";
//检查 form 属性的值
alert(field.form === form); //true
//把焦点设置到当前字段
field.focus();
//禁用当前字段
field.disabled = true;
//修改 type 属性（不推荐，但对<input>来说是可行的）
field.type = "checkbox";
- 禁止重复单击表单的提交按钮：
// 取得提交按钮， 并禁用它。
function getValue(event){
event.target.elements["submit"].disabled = true;
}
form = document.getElementById("myForm");
form.addEventListener("submit", getValue, false);
如果第一个表单字段是一个<input>元素，且其 type 特性的值为"hidden"，那么
以上代码会导致错误。另外，如果使用 CSS 的 display 和 visibility 属性隐藏了该字段，同样也会
导致错误
- 2. 共有的表单字段方法
- 要注意的是，如果第一个表单字段是一个<input>元素，且其 type 特性的值为"hidden"，那么以上代码会导致错误。另外，如果使用 CSS 的 display 和 visibility 属性隐藏了该字段，同样也会导致错误。
-HTML5 为表单字段新增了一个 autofocus 属性。在支持这个属性的浏览器中，只要设置这个属性，不用 JavaScript 就能自动把焦点移动到相应字段。例如：
<input type="text" autofocus>
14.2 文本框脚本
- 在 HTML 中，有两种方式来表现文本框：一种是使用<input>元素的单行文本框，另一种是使用<textarea>的多行文本框。这两个控件非常相似，而且多数时候的行为也差不多。不过，它们之间仍 然存在一些重要的区别。
- 要表现文本框，必须将<input>元素的 type 特性设置为"text"。而通过设置 size 特性，可以指定文本框中能够显示的字符数。通过 value 特性，可以设置文本框的初始值，而 maxlength 特性则用于指定文本框可以接受的最大字符数。
- 相对而言，<textarea>元素则始终会呈现为一个多行文本框。要指定文本框的大小，可以使用 rows和 cols 特性。其中， rows 特性指定的是文本框的字符行数，而 cols 特性指定的是文本框的字符列数与<input>元素不同， <textarea>的初始值必须要放在<textarea>和</textarea>之间，如下面的例子所示。
- 另一个与<input>的区别在于，不能在 HTML 中给<textarea>指定最大字符数。
- 它们都会将用户输入的内容保存在 value 属性中。可以通过这个属性读取和设置文本框的值。
- 像下面这样使用 value 属性读取或设置文本框的值，不建议使用标准的 DOM 方法。不要使用 setAttribute()设置<input>元素的 value 特性，也不要去修改<textarea>元素的第一个子节点。原因很简单：对 value 属性所作的修改，不一定会反映在 DOM 中。因此，在处
理文本框的值时，最好不要使用 DOM 方法。
var textbox = document.forms[0].elements["textbox1"];
alert(textbox.value);
textbox.value = "Some new value";
-
14.2.1 选择文本
input text 和 textarea 都支持 select()方法，这个方法用于选择文本框中的所有文本。在调用 select()方法时，大多数浏览器（Opera 除外）都会将焦点设置到文本框中。这个方法不接受参数，可以在任何
时候被调用。 - 在文本框获得焦点时选择其所有文本，这是一种非常常见的做法，特别是在文本框包含默认值的时候。
event.target.select() // 选中text框内所有文本；
- 选择（ select）事件
- 在选择了文本框中的文本时，就会触发 select事件。
- 取得选择的文本
- 该规范采取的办法是添加两个属性： selectionStart 和selectionEnd。这两个属性中保存的是基于 0 的数值，表示所选择
文本的范围（即文本选区开头和结尾的偏移量）。 - 用value值的字符串方法subString(textbox.selectionStart, textbox.selectionEnd)
function focusEv(event) {
let obj = event.target
//obj.selectionStart, obj.selectionEnd表示所选择文本的范围, 即文本选区开头和结尾的偏移量
alert(obj.value.substring(obj.selectionStart, obj.selectionEnd))
}
nameInput = document.getElementById("nameInput");
nameInput.addEventListener("select", focusEv, false);
- 3. 选择部分文本
- 每个文本框都有一个setSelectionRange()方法。这个方法接收两个参数（要选择Start的下标 和 要选择的End的下标）。
textbox.value = "Hello world!"
//选择第 4 到第 6 个字符
textbox.setSelectionRange(4, 7); //"o w"
- 14.2.2 过滤输入
- 综合运用事件和 DOM 手段，就可以将普通的文本框转换成能
够理解用户输入数据的功能型控件。
- 屏蔽字符
- 响应向文本框中插入字符操作的是 keypress 事件, 因此，可以通过阻止这个事件的默认行为来屏蔽某类字符。
nameInput.addEventListener("keypress", focusEv, false);
function focusEv(event) {
let obj = event.target;
let value = event.target.value;
codeC = event.charCode; //拿到按键的键码
trueC = String.fromCharCode(codeC); //转换成字符串
if (!/\d/.test(trueC)){ //检测是否字符串
alert("you pressed \"" + trueC + "\"please press Number")
}
}
- 14.2.3 自动切换焦点
- 在用户填写完当前字段时，自动将焦点切换到下一个字段。通常，在自动切换焦点之前，必须知道用户已经输入了既定长度的数据（例如电话号码）。例如，美国的电话号码通常会分为三部分：区号、局号和另外 4 位数字。
<form>
<input type="text" name="tel1" id="txtTel1" maxlength="3">
<input type="text" name="tel2" id="txtTel2" maxlength="3">
<input type="text" name="tel3" id="txtTel3" maxlength="4">
</form>
<script>
(function(){
function tabForward(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
if (target.value.length == target.maxLength){
var form = target.form;
for (var 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;
}
}
}
}
var textbox1 = document.getElementById("txtTel1");
var textbox2 = document.getElementById("txtTel2");
var textbox3 = document.getElementById("txtTel3");
EventUtil.addHandler(textbox1, "keyup", tabForward);
EventUtil.addHandler(textbox2, "keyup", tabForward);
EventUtil.addHandler(textbox3, "keyup", tabForward);
})();
</script>
-
14.2.4 HTML5 约束验证API
为了在将表单提交到服务器之前验证数据，HTML5 新增了一些功能。就是要在 HTML 标记中为特定的字段指定一些约束，然后浏览器才会自动执行表单验证。
- 必填字段
- required 属性：
- 任何标注有 required 的字段，在提交表单时都不能空着。这个属性适用于<input>、 <textarea>和<select>字段；
- required 属性适用于以下 <input> 类型：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。
- required 属性：
<input type="text" name="username" required>
- 在JavaScript中验证是否必填字段：
var isUsernameRequired = document.forms[0].elements["username"].required;
- 另外，使用下面这行代码可以测试浏览器是否支持 required 属性：
var isRequiredSupported = "required" in document.createElement("input")
- 其他输入类型
- 检测浏览器是否支持这些新类型
var input = document.createElement("input");
input.type = "email";
var isEmailSupported = (input.type == "email");
- 数值范围
- HTML5 还定义了另外几个输入元素。这几个元素都要求填写某种基于数字的值： "number"、 "range"、 "datetime"、 "datetime-local"、 "date"、 "month"、 "week"，还有"time"。
- 对所有这些数值类型的输入元素，可以指定 min 属性（最小的可能值）、max 属性（最大的可能值）和 step 属性（从 min 到 max 的两个刻度间的差值）。例如，想让用户只能输入 0 到 100 的值，而且这个值必须是 5 的倍数，可以这样写代码：
<input type="number" min="0" max="100" step="5" name="count">
- 输入模式 re
- HTML5 为文本字段新增了 pattern 属性。这个属性的值是一个正则表达式，用于匹配文本框中的值。
<input type="text" pattern="\d+" name="count">
- 检测有效性
-
checkValidity()
- 使用 checkValidity()方法可以检测表单中的某个字段是否有效。所有表单字段都有个方法，如果字段的值有效，这个方法返回 true，否则返回 false。字段的值是否有效的判断依据是本节前面介绍过的那些约束。换句话说，必填字段( required )中如果没有值就是无效的，而字段中的值与 pattern 属性不匹配也是无效的。
-
validity
- validity 属性则会告诉你为什么字段有效或无效。这个对象中包含一系列属性，每个属性会返回一个布尔值:
- customError :设置为 true, 如果设置了自定义的 validity 信息。
- patternMismatch: 设置为 true, 如果元素的值不匹配它的模式属性。
- rangeOverflow: 设置为 true, 如果元素的值大于设置的最大值。
- rangeUnderflow: 设置为 true, 如果元素的值小于它的最小值。
- stepMismatch: 设置为 true, 如果元素的值不是按照规定的 step 属性设置。
- tooLong: 设置为 true, 如果元素的值超过了 maxLength 属性设置的长度。
- typeMismatch: 设置为 true, 如果元素的值不是预期相匹配的类型。
- valueMissing: 设置为 true，如果元素 (required 属性) 没有值。
- valid: 设置为 true，如果元素的值是合法的。
-
<input id="myInput" type="text" pattern="(\d{1,3}\.){3}\d{1,3}" name="count" required >
<button onclick="match(event)">ismatch</button>
<script>
myInput = document.getElementById("myInput");
function match(event){
if (myInput.checkValidity()){
if(!myInput.validity.patternMismatch){
alert("it's macth" )
}
}
else{
alert("your context is not match！")
}
}
</script>
- 禁用验证
- 通过设置 novalidate 属性，可以告诉表单不进行验证
<form method="post" action="signup.php" novalidate>
<!--这里插入表单元素-->
</form>
- 在 JavaScript 中使用 noValidate 属性可以取得或设置这个值，如果这个属性存在，值为 true，如果不存在，值为 false。
document.forms[0].noValidate = true; //禁用验证
- 如果一个表单中有多个提交按钮，为了指定点击某个提交按钮不必验证表单，可以在相应的按钮上添加 formnovalidate 属性。
<form method="post" action="foo.php">
<!--这里插入表单元素-->
<input type="submit" value="Regular Submit">
<input type="submit" formnovalidate name="btnNoValidate" value="Non-validating Submit">
</form>
14.3 选择框脚本
- 在 DOM 中，每个<option>元素都有一个 HTMLOptionElement 对象表示。为便于访问数据，HTMLOptionElement 对象添加了some属性和方法：
<select id="mySec" type="select-multiple" >
<option class="myOption" value="one">one line</option>
<option class="myOption" value="two">two line</option>
<option class="myOption">three</option>
</select>
如果在select里其中有一个option没有vlaue属性 or label属性，那么在script里调用optionElement.value or label 就return它的text属性值；
-
选择框是通过<select>和<option>元素创建的。为了方便与这个控件交互，除了所有表单字段共有的属性和方法外， HTMLSelectElement 类型还提供了下列属性和方法。
- add(newOption, relOption)：向控件中插入新<option>元素，其位置在相关项（relOption）之前。
- multiple：布尔值，表示是否允许多项选择；等价于 HTML 中的 multiple 特性。
- options：控件中所有<option>元素的 HTMLCollection。
- remove(index)：移除给定位置的选项。
- selectedIndex：基于 0 的选中项的索引，如果没有选中项，则值为-1。对于支持多选的控件，只保存选中项中第一项的索引。
- size：选择框中可见的行数；等价于 HTML 中的 size 特性。
选择框的 type 属性不是"select-one"，就是"select-multiple"，这取决于 HTML 代码中有没有 multiple 特性。
-
选择框的 value 属性由当前选中项决定，相应规则如下。
- 如果没有选中的项，则选择框的 value 属性保存空字符串。
- 如果有一个选中项，而且该项的 value 特性已经在 HTML 中指定，则选择框的 value 属性等于选中项的 value 特性。即使 value 特性的值是空字符串，也同样遵循此条规则。
- 如果有一个选中项，但该项的 value 特性在 HTML 中未指定，则选择框的 value 属性等于该项的文本。
- 如果有多个选中项，则选择框的 value 属性将依据前两条规则取得第一个选中项的值。
<select id="mySec" type="select-multiple" >
<option class="myOption" value="one">one line</option>
<option class="myOption" value="two">two line</option>
<option label="333" class="myOption">three</option>
</select>
</form>
<script>
var mySec = document.getElementById("mySec");
function selectFunc(event) {
var index = mySec.selectedIndex;
alert( "option's label = " + mySec.options[index].label + "\n " + "option's text = " + mySec.options[index].text);
}
</script>
-
在 DOM 中，每个<option>元素都有一个 HTMLOptionElement 对象表示。为便于访问数据，HTMLOptionElement 对象添加了下列属性：
- index：当前选项在 options 集合中的索引。
- label：当前选项的标签；等价于 HTML 中的 label 特性。
- selected：布尔值，表示当前选项是否被选中。将这个属性设置为 true 可以选中当前选项。
- text：选项的文本。
- value：选项的值（等价于 HTML 中的 value 特性）
14.3.1 选择选项
对于只允许选择一项的选择框，访问选中项的最简单方式，就是使用选择框的 selectedIndex 属性;
var mySec = document.getElementById("mySec");
function selectFunc(event) {
var index = event.target.selectedIndex;
alert(event.target.options[index] + " +++ "+ index);
}
selectElement.selectedIndex // return option在options里的offset！
mySec.addEventListener("change", selectFunc)
对于可以选择多项的选择框，读取 selectedIndex 则只会返回选中项中第一项的索引值。
另一种选择选项的方式，就是取得对某一项的引用，然后将其 selected 属性设置为 true。例如，下面的代码会选中选择框中的第一项：
mySec.options[1].selected = true; // 选中某一项；
-
收集selectbox里选中的option 函数：
- 遍历selectbox.options
- 检测 option的selected 是否为true
- 收集到Array里
-
创建option方法
// 创建option
var newOptionObj = document.createElement("option");
var newOptionObj = new Option("Option text", "Option value") // new optionObj arg(text, value)
- 添加到select
// appendChild or select.add
select.add(newOptionObj, beforeThisOption) // (recommend)
// mySec.insertBefore(newOption, mySec.options[0]) 效果同add方法
- 14.3.3 移除选项
- selectbox.removeChild(selectbox.options[0]); //移除第一个选项
- selectbox.remove(0) // selectElement.remove方法 移除第一个选项
- selectbox.options[0] = null; //移除第一个选项
- 14.3.4 移动和重排选项
- 使用 DOM 的 appendChild()方法，就可以将第一个选择框中的选项直接移动到第二个选择框中。我们知道，如果为 appendChild()方法传入一个文档中已有的元素，那么就会先从该元素的父节点中移除它，再把它添加到指定的位置。
selectElement = document.getElementById("mySelect");
selectElement.insertBefore(selectElement.options[2], selectElement.options[selectElement.options[2].index-1])
14.4 表单序列化
- 随着 Ajax 的出现，表单序列化已经成为一种常见需求（第 21 章将讨论 Ajax）。在 JavaScript 中，可
以利用表单字段的 type 属性，连同 name 和 value 属性一起实现对表单的序列化。在编写代码之前，有必须先搞清楚在表单提交期间，浏览器是怎样将数据发送给服务器的。- 对表单字段的名称和值进行 URL 编码，使用和号（&）分隔。
- 不发送禁用的表单字段。
- 只发送勾选的复选框和单选按钮。
- 不发送 type 为"reset"和"button"的按钮。
- 多选选择框中的每个选中的值单独一个条目。
- 在单击提交按钮提交表单的情况下，也会发送提交按钮；否则，不发送提交按钮。也包括 type为"image"的<input>元素。
- <select>元素的值，就是选中的<option>元素的 value 特性的值。如果<option>元素没有value 特性，则是<option>元素的文本值。
- 在表单序列化过程中，一般不包含任何按钮字段，因为结果字符串很可能是通过其他方式提交的。
- 除此之外的其他上述规则都应该遵循。
14.5 富文本编辑
- 这一技术的本质，就是在页面中嵌入一个包含空 HTML 页面的 iframe。通过设置 designMode 属性，这个空白的 HTML 页面可以被编辑，而编辑对象则是该页面<body>元素的 HTML 代码。 designMode 属性有两个可能的值： "off"（默认值）和"on"。在设置为"on"时，整个文档都会变得可以编辑（显示插入符号），然后就可以像使用字处理软件一样，通过键盘将文本内容加粗、变成斜体，等等。
<iframe id="myframe">
</iframe>
<script>
myframe = document.getElementById("myframe");
myframe.contentDocument.designMode = "on";
</script>
- firfox中要使<iframe>变成可编辑， 必须将代码放在事件函数中
<body id="myBody" onload="load()">
<iframe id="myframe">
</iframe>
<script>
var myframe = document.getElementById("myframe");
function load(){
myframe.contentDocument.designMode = "on";
};
</script>
</body>
- 14.5.1 使用contenteditable属性
- 另一种编辑富文本内容的方式是使用名为 contenteditable 的特殊属性，可以把 contenteditable 属性应用给页面中的任何元素，然后用户立即就可以编辑该元素。
<div class="editable" id="richedit" contenteditable></div>
var div = document.getElementById("richedit");
div.contentEditable = "true";
- 14.5.2 操作富文本
-
document.execCommand()方法：与富文本编辑器交互的主要方式；
- 可以为 document.execCommand()方法传递 3 个参数：要执行的命令名称、表示浏览器是否应该为当前命令提供用户界面的一个布尔值和执行命令必须的一个值（如果不需要值，则传递 null）。为了确保跨浏览器的兼容性，第二个参数应该始终设置为 false，因为 Firefox 会在该参数为 true 时抛出错误。
myframe.contentDocument.execCommand("bold", false, "null");
- 同样的方法也适用于页面中 contenteditable 属性为"true"的区块，只要把对框架的引用替换
成当前窗口的 document 对象即可。
//转换粗体文本
document.execCommand("bold", false, null);
- 与命令相关的方法：
- queryCommandEnabled()方法：可以用它来检测是否可以针对当前选择的文本，或者当前插入字符所在位置执行某个命令。这个方法接收一个参数，即要检测的命令。如果当前编辑区域允许执行传入的命令，这个方法返回 true，否则返回 false。
var result = myframe.contentDocument.queryCommandEnabled("bold")
- queryCommandState()方法: 用于确定是否已将指定命令应用到了选择的文本。
// 如果此前已经对选择的文本执行了"bold"命令，那么上面的代码会返回 true。
//一些功能全面的富文本编辑器，正是利用这个方法来更新粗体、斜体等按钮的状态的。
var isBold= myframe.contentDocument.queryCommandState("bold")
- queryCommandValue()方法: 用于取得执行命令时传入的值（即前面例子中传给
document.execCommand()的第三个参数）。
// 在对一段文本应用"fontsize"命令时如果传入了7，
//那么下面的代码就会返回"7"
var fontSize= myframe.contentDocument.queryCommandValue("fontsize");
14.5.3 富文本选区
14.5.4 表单与富文本
由于富文本编辑是使用 iframe 而非表单控件实现的，因此从技术上说，富文本编辑器并不属于表
单。换句话说，富文本编辑器中的 HTML 不会被自动提交给服务器，而需要我们手工来提取并提交
HTML。为此，通常可以添加一个隐藏的表单字段，让它的值等于从 iframe 中提取出的 HTML。具体
来说，就是在提交表单之前，从 iframe 中提取出 HTML，并将其插入到隐藏的字段中。
<iframe id="myframe" name="myframe">
</iframe>
<form id="myForm">
<input id="inputText" type="text" name="myInput">
</form>
<button id="getFrameValue" onclick="showMyInputValue(event)">getFrameValue</button>
<script type="text/javascript">
function showMyInputValue(event) {
let content = myframe.contentDocument.body.innerHTML; //拿到富文本编辑器里的内容
let input = document.getElementById("inputText");
input.value = content; // 放到表单中， 就可以提交表单了；
alert(input.value)
}
function load(event){
myframe.contentDocument.designMode = "on";
}
</script>
