福州市住房和城乡建设局网站,广告投放平台都有哪些,cps广告联盟,seo知识总结input 元素
input元素主要用于表单组件#xff0c;它继承了 HTMLInputElement 接口。
HTMLInputElement 的实例属性
特征属性 name#xff1a;字符串#xff0c;表示input节点的名称。该属性可读写。 type#xff1a;字符串#xff0c;表示input 元素
input元素主要用于表单组件它继承了 HTMLInputElement 接口。
HTMLInputElement 的实例属性
特征属性 name字符串表示input节点的名称。该属性可读写。 type字符串表示input节点的类型。该属性可读写。 disabled布尔值表示input节点是否禁止使用。一旦被禁止使用表单提交时不会包含该input节点。该属性可读写。 autofocus布尔值表示页面加载时该元素是否会自动获得焦点。该属性可读写。 required布尔值表示表单提交时该input元素是否必填。该属性可读写。 value字符串表示该input节点的值。该属性可读写。 validity返回一个ValidityState对象表示input节点的校验状态。该属性只读。 validationMessage字符串表示该input节点的校验失败时用户看到的报错信息。如果该节点不需要校验或者通过校验该属性为空字符串。该属性只读。 willValidate布尔值表示表单提交时该input元素是否会被校验。该属性只读。
表单相关属性 form返回input元素所在的表单form节点。该属性只读。 formAction字符串表示表单提交时的服务器目标。该属性可读写一旦设置了这个属性会覆盖表单元素的action属性。 formEncType字符串表示表单提交时数据的编码方式。该属性可读写一旦设置了这个属性会覆盖表单元素的enctype的属性。 formMethod字符串表示表单提交时的 HTTP 方法。该属性可读写一旦设置了这个属性会覆盖表单元素的method属性。 formNoValidate布尔值表示表单提交时是否要跳过校验。该属性可读写一旦设置了这个属性会覆盖表单元素的formNoValidate属性。 formTarget字符串表示表单提交后服务器返回数据的打开位置。该属性可读写一旦设置了这个属性会覆盖表单元素的target属性。
文本输入框的特有属性
以下属性只有在input元素可以输入文本时才有效。 autocomplete字符串on或off表示该input节点的输入内容可以被浏览器自动补全。该属性可读写。 maxLength整数表示可以输入的字符串最大长度。如果设为负整数会报错。该属性可读写。 size整数表示input节点的显示长度。如果类型是text或password该属性的单位是字符个数否则单位是像素。该属性可读写。 pattern字符串表示input节点的值应该满足的正则表达式。该属性可读写。 placeholder字符串表示该input节点的占位符作为对元素的提示。该字符串不能包含回车或换行。该属性可读写。 readOnly布尔值表示用户是否可以修改该节点的值。该属性可读写。 min字符串表示该节点的最小数值或日期且不能大于max属性。该属性可读写。 max字符串表示该节点的最大数值或日期且不能小于min属性。该属性可读写。 selectionStart整数表示选中文本的起始位置。如果没有选中文本返回光标在input元素内部的位置。该属性可读写。 selectionEnd整数表示选中文本的结束位置。如果没有选中文本返回光标在input元素内部的位置。该属性可读写。 selectionDirection字符串表示选中文本的方向。可能的值包括forward与文字书写方向一致、backward与文字书写方向相反和none文字方向未知。该属性可读写。
复选框和单选框的特有属性
如果input元素的类型是复选框checkbox或单选框radio会有下面的特有属性。 checked布尔值表示该input元素是否选中。该属性可读写。 defaultChecked布尔值表示该input元素默认是否选中。该属性可读写。 indeterminate布尔值表示该input元素是否还没有确定的状态。一旦用户点击过一次该属性就会变成false表示用户已经给出确定的状态了。该属性可读写。
图像按钮的特有属性
如果input元素的类型是image就会变成一个图像按钮会有下面的特有属性。 alt字符串图像无法显示时的替代文本。该属性可读写。 height字符串表示该元素的高度单位像素。该属性可读写。 src字符串表示该元素的图片来源。该属性可读写。 width字符串表示该元素的宽度单位像素。该属性可读写。
文件上传按钮的特有属性
如果input元素的类型是file就会变成一个文件上传按钮会有下面的特有属性。 accept字符串表示该元素可以接受的文件类型类型之间使用逗号分隔。该属性可读写。 files返回一个FileList实例对象包含了选中上传的一组File实例对象。
其他属性 defaultValue字符串表示该input节点的原始值。 dirName字符串表示文字方向。 accessKey字符串表示让该input节点获得焦点的某个字母键。 list返回一个datalist节点该节点必须绑定input元素且input元素的类型必须可以输入文本否则无效。该属性只读。 multiple布尔值表示是否可以选择多个值。 labels返回一个NodeList实例代表绑定当前input节点的label元素。该属性只读。 step字符串表示在min属性到max属性之间每次递增或递减时的数值或时间。 valueAsDateDate实例一旦设置该input元素的值会被解释为指定的日期。如果无法解析该属性的值input节点的值将是null。 valueAsNumber浮点数当前input元素的值会被解析为这个数值。如果输入框为空该属性返回NaN。
下面是valueAsNumber属性的例子。
/* HTML 代码如下input typenumber value1.234 /
*/
input.value // 1.234
input.valueAsNumber // 1.234
HTMLInputElement 的实例方法 focus()当前input元素获得焦点。 blur()移除input元素的焦点。 select()选中input元素内部的所有文本。该方法不能保证input获得焦点最好先用focus()方法再用这个方法。 click()模拟鼠标点击当前的input元素。 setSelectionRange()选中input元素内部的一段文本但不会将焦点转移到选中的文本。该方法接受三个参数第一个参数是开始的位置从0开始第二个参数是结束的位置不包括该位置第三个参数是可选的表示选择的方向有三个可能的值forward、backward和默认值none。 setRangeText()新文本替换选中的文本。该方法接受四个参数第一个参数是新文本第二个参数是替换的开始位置(从0开始计算)第三个参数是结束位置该位置不包括在内第四个参数表示替换后的行为可选有四个可能的值select选中新插入的文本、start光标位置移到插入的文本之前、end光标位置移到插入的文本之后、preserve默认值如果原先就有文本被选中且本次替换位置与原先选中位置有交集则替换后同时选中新插入的文本与原先选中的文本否则保持原先选中的文本。 setCustomValidity()该方法用于自定义校验失败时的报错信息。它的参数就是报错的提示信息。注意一旦设置了自定义报错信息该字段就不会校验通过了因此用户重新输入时必须将自定义报错信息设为空字符串请看下面的例子。 checkValidity()返回一个布尔值表示当前节点的校验结果。如果返回false表示不满足校验要求否则就是校验成功或不必校验。 stepDown()将当前input节点的值减少一个步长。该方法可以接受一个整数n作为参数表示一次性减少n个步长默认是1。有几种情况会抛错当前input节点不适合递减或递增、当前节点没有step属性、input节点的值不能转为数字、递减之后的值小于min属性或大于max属性。 stepUp()将当前input节点的值增加一个步长。其他与stepDown()方法相同。
下面是setSelectionRange()方法的一个例子。
/* HTML 代码如下pinput typetext idmytextbox size20 valueHelloWorld//ppbutton οnclickSelectText()选择文本/button/p
*/
function SelectText() {var input document.getElementById(mytextbox);input.focus();input.setSelectionRange(2, 5);
}
上面代码中点击按钮以后会选中llo三个字符。
下面是setCustomValidity()的例子。
/* HTML 代码如下form idforminput idfield typetext pattern[a-f,0-9]{4} autocompleteoff/form
*/
const form document.querySelector(#form);
const field document.querySelector(#field);
form.addEventListener(submit, (e) {e.preventDefault(); // 防止这个例子发出 POST 请求
});
field.oninvalid (event) {event.target.setCustomValidity(必须是一个 4 位十六进制数);
}
field.oninput (event) {event.target.setCustomValidity();
}
上面代码中输入框必须输入一个4位的十六进制数。如果不满足条件比如输入xxx按下回车键以后就会提示自定义的报错信息。一旦自定义了报错信息输入框就会一直处于校验失败状态因此重新输入时必须把自定义报错信息设为空字符串。另外为了避免自动补全提示框遮住报错信息必须将输入框的autocomplete属性关闭。
