javascript:<button> 元素

原文章:https://wangdoc.com/javascript/index.html

<button> 元素

<button>元素继承了HTMLButtonElement接口。它有以下的实例属性。

(1)HTMLButtonElement.accessKey

HTMLButtonElement.accessKey属性返回一个字符串,表示键盘上对应的键,通过Alt + 这个键可以让按钮获得焦点。该属性可读写。

(2)HTMLButtonElement.autofocus

HTMLButtonElement.autofocus属性是一个布尔值,表示页面加载过程中,按钮是否会自动获得焦点。该属性可读写。

(3)HTMLButtonElement.disabled

HTMLButtonElement.disabled属性是一个布尔值,表示该按钮是否禁止点击。该属性可读写。

(4)HTMLButtonElement.form

HTMLButtonElement.form属性是一个表单元素,返回该按钮所在的表单。该属性只读。如果按钮不属于任何表单,该属性返回null

(5)HTMLButtonElement.formAction

HTMLButtonElement.formAction返回一个字符串,表示表单提交的 URL。该属性可读写,一旦设置了值,点击按钮就会提交到该属性指定的 URL,而不是<form>元素指定的 URL。

(6)HTMLButtonElement.formEnctype

HTMLButtonElement.formEnctype属性是一个字符串,表示数据提交到服务器的编码类型。该属性可读写,一旦设置了值,点击按钮会按照该属性指定的编码方式,而不是<form>元素指定的编码方式。

该属性可以取以下的值。

  • application/x-www-form-urlencoded(默认值)
  • multipart/form-data(上传文件的编码方式)
  • text/plain

(7)HTMLButtonElement.formMethod

HTMLButtonElement.formMethod属性是一个字符串,表示浏览器提交表单的 HTTP 方法。该属性可读写,一旦设置了值,点击后就会采用该属性指定的 HTTP 方法,而不是<form>元素指定的编码方法。

(8)HTMLButtonElement.formNoValidate

HTMLButtonElement.formNoValidate属性是一个布尔值,表示点击按钮提交表单时,是否要跳过表单校验的步骤。该属性可读写,一旦设置会覆盖<form>元素的novalidate属性。

(9)HTMLButtonElement.formTarget

HTMLButtonElement.formTarget属性是一个字符串,指定了提交了表单以后,哪个窗口展示服务器返回的内容。该属性可读写,一旦设置会覆盖<form>元素的target属性。

(10)HTMLButtonElement.labels

HTMLButtonElement.labels返回NodeList实例,表示那些绑定按钮的<label>元素。该属性只读。

/* HTML 代码如下
  <label id="label1" for="test">Label 1</label>
  <button id="test">Button</button>
  <label id="label2" for="test">Label 2</label>
*/

const button = document.getElementById('test');

for(var i = 0; i < button.labels.length; i++) {
  console.log(button.labels[i].textContent);
}
// "Label 1"
// "Label 2"

上面代码中,两个<label>元素绑定<button>元素。button.labels返回这两个<label>元素。

(11)HTMLButtonElement.name

HTMLButtonElement.name属性是一个字符串,表示按钮元素的name属性。如果没有设置name属性,则返回空字符串。该属性可读写。

(12)HTMLButtonElement.tabIndex

HTMLButtonElement.tabIndex是一个整数,代表按钮元素的 Tab 键顺序。该属性可读写。

(13)HTMLButtonElement.type

HTMLButtonElement.type属性是一个字符串,表示按钮的行为。该属性可读写,可能取以下的值。

  • submit:默认值,表示提交表单。
  • reset:重置表单。
  • button:没有任何默认行为。

(14)HTMLButtonElement.validationMessage

HTMLButtonElement.validationMessage属性是一个字符串,表示没有通过校验时显示的提示信息。该属性只读。

(15)HTMLButtonElement.validity

HTMLButtonElement.validity属性返回该按钮的校验状态(ValidityState)。该属性只读。

(16)HTMLButtonElement.value

HTMLButtonElement.value属性返回该按钮绑定的值。该属性可读写。

(17)HTMLButtonElement.willValidate

HTMLButtonElement.willValidate属性是一个布尔值,表示该按钮提交表单时是否将被校验,默认为false。该属性只读。

原文地址:https://www.cnblogs.com/wbyixx/p/12499631.html

时间: 2024-08-03 11:44:21

javascript:<button> 元素的相关文章

用Javascript清空(重置)文件类型的INPUT元素的值

之前在StackOverflow回答了这个问题,现在整理到Blog里. 因为安全限制,脚本是不能随意设置其value值的,所以并不能像其它表单输入域那样用属性来设置使其重置. 重置一个文件域的值,归纳起来主要有 3 种方法. 本文分析这三种方法的浏览器兼容性以及优缺点,并给出一个比较完美的综合方案的代码和Demo. 重置文件域的三种方法: 设置value属性为空. 对于IE11以上和其它较新的非IE的现代浏览器Chrome/Firefox/Opera...有效. 克隆或创建一个新的文件输入元素进

javascript:&lt;input&gt; 元素

原文章:https://wangdoc.com/javascript/index.html <input> 元素 <input>元素主要用于表单组件,它继承了 HTMLInputElement 接口. HTMLInputElement 的实例属性 特征属性 name:字符串,表示<input>节点的名称.该属性可读写. type:字符串,表示<input>节点的类型.该属性可读写. disabled:布尔值,表示<input>节点是否禁止使用.一

HTML5 改良的 input 元素的种类

在HTML5中,增加与改良的input元素中的type属性,包括url.email.date.time.datetime.datetime-local.month.week.number.range.search.tel.color类型. <!DOCTYPE html> <html> <head lang="en"> <title>增加与改良的input元素中的type属性</title> <meta charset=&

JavaScript通过元素id和name直接获取元素的方法

概览: 偶然的机会,我在JavaScript中直接用HTML元素的id属性来获取该元素,并设置该元素的其他属性值,竟然能够正确解析不报错!于是我去查阅相关资料,也有其他同行这么用. 虽然说这种用法不是标准用法,推荐使用 document.getElementById(id);document.getElementByName(name); ,但也是一种新发现,先记录下来,以备后用. 本文讲述了JavaScript通过元素id和name直接获取元素的方法,以及自己在实践过程中总结的注意事项. 具体

07 html 表单form元素 各种input元素 常用元素综合案例

Html的表单元素,主要用途:用户输入数据,并提交给服务器 基本语法是: <form action=”url”(是指把表单提交给谁) method=”提交的方法(get/post),默认是get”> 各种输入元素[输入框,下拉列表,文本域,密码框] </form> 案例:登陆界面 login.html <html> <head> <title>登陆界面</title> </head> <body> <fo

JavaScript实现元素属性的缓冲变化

--------------------------------------------------- 今天给大家分享一个用JavaScript实现 元素的属性缓冲变化效果,代码如下: --------------------------------------------------- 1 //获取样式 2 function getStyle( obj, attr ){ //封装的获取元素样式的函数; 3 4 if(obj.currentStyle){ 5 6 return obj.curre

为什么 input 元素能用 width 属性

前几天在是写网页的时候发现input可以设置宽高,很疑惑,上网查了之后发现: 简单的认为 input 就是 inline 元素是片面的.元素默认以何种 display 属性值显示出来,这个其实更多的时候是由浏览器决定的(不同浏览器的差异性,导致我们需要 reset CSS),下面是部分浏览器 input 元素默认 CSS: IE6.IE7.IE8.IE9(部分) background-color: #FFF; border-width: 2px; font-family: sans-serif;

JavaScript获取元素样式

原生的JavaScript获取写在标签内部的样式很简单: <div class="test" id="test" style="width:100px;">test</div> <script type="text/javascript"> window.onload=function(){ var oTest=document.getElementById("test"

javascript 获取元素样式的方法

javascript 获取元素样式常用方法. Javascript获取CSS属性值方法:getComputedStyle和currentStyle 1 .对于元素的内联CSS样式(<div style="color:#369">hello</div>),可以直接使用element.style.color来直接获取css属性的值: 2. 但是对于外部定义的css样式使用这种方式就无法获取了,而且IE浏览器和其他标准浏览器(Firefox,Chrome,Opera,

jquery监听input元素输入

一般我们监听input内容的变化都是通过onchange()事件来绑定,但这个做法有一个缺陷就是只有当正在被输入的input元素失去焦点时(即鼠标点击了别处)才会触发,而实际上我们往往希望能够满足在用户输入过程中,在保持焦点不变的情况下随着输入内容的变化而触发一定事件处理函数(这样就不用劳烦用户用鼠标再点击以下别的地方). 这种应用场景可以使用jquery的绑定技术 eg. $("#gamount").bind('input propertychange',function(){