diff options
author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
---|---|---|
committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
commit | 33058f2b292b3a581333bdfb21b8f671898c5060 (patch) | |
tree | 51c3e392513ec574331b2d3f85c394445ea803c6 /files/zh-cn/web/api/htmlbuttonelement | |
parent | 8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff) | |
download | translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2 translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip |
initial commit
Diffstat (limited to 'files/zh-cn/web/api/htmlbuttonelement')
-rw-r--r-- | files/zh-cn/web/api/htmlbuttonelement/index.html | 293 |
1 files changed, 293 insertions, 0 deletions
diff --git a/files/zh-cn/web/api/htmlbuttonelement/index.html b/files/zh-cn/web/api/htmlbuttonelement/index.html new file mode 100644 index 0000000000..c186ced221 --- /dev/null +++ b/files/zh-cn/web/api/htmlbuttonelement/index.html @@ -0,0 +1,293 @@ +--- +title: HTMLButtonElement +slug: Web/API/HTMLButtonElement +tags: + - API + - HTML DOM +translation_of: Web/API/HTMLButtonElement +--- +<div>{{APIRef("HTML DOM")}}</div> + +<p><strong><code>HTMLButtonElement</code></strong> 接口提供操作button元素 (除了 {{HTMLElement("button")}} 对象,这个接口对继承了该对象的元素也有效)的属性和方法。</p> + +<h2 id="属性">属性</h2> + +<p><em>从父对象{{domxref("HTMLElement")}}继承的属性。</em></p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">名字</th> + <th scope="col">类型</th> + <th scope="col">描述</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>accessKey</code></td> + <td>{{domxref("DOMString")}}</td> + <td>一个键盘字符构成的字符串,表明用哪个键盘字符能够访问这个按钮。</td> + </tr> + <tr> + <td><code>autofocus</code></td> + <td>{{domxref("Boolean")}}</td> + <td>这个控件是否可以在页面加载时自动得到焦点。但用户选择了其他焦点除外。只有和表单关联的按钮该特性才有效。</td> + </tr> + <tr> + <td><code>disabled</code></td> + <td>{{domxref("Boolean")}}</td> + <td>这个控件是否被禁用。被禁用的控件不接受任何输入和点击。</td> + </tr> + <tr> + <td><code>form</code> {{readonlyInline}}</td> + <td>{{domxref("HTMLFormElement")}}</td> + <td>这个按钮所关联的表单元素。如果这个按钮是一个表单元素的后代元素,那么这个属性的值就是那个表单元素。<br> + 如果这个按钮不是一个表单元素的后代元素,那么这个数学可以是任意同文档中的表单元素,或者是 <code>null</code> 表明它没有关联任何表单。</td> + </tr> + <tr> + <td><code>formAction</code></td> + <td>{{domxref("DOMString")}}</td> + <td>一个处理提交信息的URI资源地址。如果指定该属性,会覆盖拥有该元素的{{HTMLElement("form")}} 元素的{{htmlattrxref("action", "form")}} 属性。</td> + </tr> + <tr> + <td><code>formEncType</code></td> + <td>{{domxref("DOMString")}}</td> + <td>表单要提交给服务器处理的内容的类型。如果指定该属性,会覆盖拥有该元素的{{HTMLElement("form")}} 元素的{{htmlattrxref("enctype", "form")}} 属性。</td> + </tr> + <tr> + <td><code>formMethod</code></td> + <td>{{domxref("DOMString")}}</td> + <td>浏览器提交表单内容的HTTP方法。如果指定该属性,会覆盖拥有该元素的{{HTMLElement("form")}} 元素的.{{htmlattrxref("method", "form")}}属性。</td> + </tr> + <tr> + <td><code>formNoValidate</code></td> + <td>{{domxref("Boolean")}}</td> + <td>表明这个表单提交时是否需要验证。如果指定该属性,会覆盖拥有该元素的{{HTMLElement("form")}} 元素的.{{htmlattrxref("novalidate", "form")}}属性。</td> + </tr> + <tr> + <td><code>formTarget</code></td> + <td>{{domxref("DOMString")}}</td> + <td>一个名字或关键字,用于表明显示服务器响应的页面。如果指定该属性,会覆盖拥有该元素的{{HTMLElement("form")}} 元素的.{{htmlattrxref("target", "form")}}属性。</td> + </tr> + <tr> + <td><code>labels</code> {{readonlyInline}}</td> + <td>{{domxref("NodeList")}}</td> + <td>一个{{HTMLElement("label")}} 元素表,说明哪些标签是归属这个button的。</td> + </tr> + <tr> + <td><code>menu</code> {{experimental_inline}}</td> + <td>{{domxref("HTMLMenuElement")}}</td> + <td>如果该按钮<code>type="menu"</code>,被点击的时候应该显示的菜单。</td> + </tr> + <tr> + <td><code>name</code></td> + <td>{{domxref("DOMString")}}</td> + <td>提交到服务器时表单描述该对象的name。 {{HTMLVersionInline(5)}} 如果指定该属性,不能使用空字符串 。</td> + </tr> + <tr> + <td><code>tabIndex</code></td> + <td>long</td> + <td>用于表示该元素在tab按钮跳动过程中的序号的一个数字。</td> + </tr> + <tr> + <td><code>type</code></td> + <td>{{domxref("DOMString")}}</td> + <td>表明按钮的行为。这个属性是枚举类型,可以是以下的值: + <ul> + <li><code>"submit"</code>: 这个按钮会提交表单。如果不指定该属性,这是默认值。{{HTMLVersionInline(5)}} 中可以动态改为空值或者无效值。</li> + <li><code>"reset"</code>: 用于重置(清空)表单。</li> + <li><code>"button"</code>: 什么都不做的按钮。通常通过Javascript挂载事件。</li> + <li><code>"menu"</code>: 显示菜单的按钮 {{experimental_inline}}。</li> + </ul> + </td> + </tr> + <tr> + <td><code>validationMessage</code> {{readonlyInline}}</td> + <td>{{domxref("DOMString")}}</td> + <td>报告该控件不满足验证要求的,提示给用户的看的信息。如果这个控件没有验证约束(<code>willValidate</code>值为<code>false</code>),或者满足验证的要求,那么这个属性为空字符串。</td> + </tr> + <tr> + <td><code>validity</code> {{readonlyInline}}</td> + <td>{{domxref("ValidityState")}}</td> + <td>这个控件当前的验证状态。</td> + </tr> + <tr> + <td><code>value</code></td> + <td>{{domxref("DOMString")}}</td> + <td>这个控件当前的表单值。</td> + </tr> + <tr> + <td><code>willValidate</code></td> + <td>{{domxref("Boolean")}}</td> + <td>表明这个按钮是否需要在提交前进行验证。如果不需要,这个属性值为<code>false</code> 。</td> + </tr> + </tbody> +</table> + +<h2 id="方法">方法</h2> + +<p><em>从父对象{{domxref("HTMLElement")}}继承的方法。</em></p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">名字</th> + <th scope="col">返回类型</th> + <th scope="col">描述</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>checkValidity()</code></td> + <td>{{domxref("Boolean")}}</td> + <td>对按钮元素不支持。</td> + </tr> + <tr> + <td><code>setCustomValidity(in DOMString error)</code></td> + <td><code>void</code></td> + <td>对按钮元素不支持。</td> + </tr> + </tbody> +</table> + +<p>在基于Gecko的浏览器中,在表单验证时会使用{{cssxref(":-moz-submit-invalid")}} 伪类修饰提交按钮。</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">注释</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "text-level-semantics.html#the-a-element", "HTMLAnchorElement")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>新添加的属性: <code>menu</code>。<br> + <code>type</code> 属性可以使用的新的值<code>"menu"</code>。</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "text-level-semantics.html#the-a-element", "HTMLAnchorElement")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>属性<code>tabindex</code> 和<code>accesskey</code>被定义在{{domxref("HTMLElement")}}中。<br> + 添加了下列属性:<code>autofocus</code>, <code>formAction</code>, <code>formEncType</code>, <code>formMethod</code>, <code>formNoValidate</code>, <code>formTarget</code>, <code>labels</code>, <code>validity</code>, <code>validationMessage</code>和 <code>willValidate</code>。<br> + 添加了下列方法:<code>checkValidity()</code>, <code>setCustomValidity()</code>.<br> + <code>type</code> 属性不再是只读的。</td> + </tr> + <tr> + <td>{{SpecName('DOM2 HTML', 'html.html#ID-ID-48250443', 'HTMLAnchorElement')}}</td> + <td>{{Spec2('DOM2 HTML')}}</td> + <td>和 {{SpecName("DOM1")}}一样</td> + </tr> + <tr> + <td>{{SpecName('DOM1', 'level-one-html.html#ID-48250443', 'HTMLAnchorElement')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>最初的定义。</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>特性</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>基本支持</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop(1.0)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>与表单相关的属性</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop(2.0)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>labels</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}} {{unimplemented_inline(556743)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>menu</code> & <code>type="menu"</code> {{experimental_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>特性</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>基本支持</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile(1.0)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>与表单相关的属性</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop(2.0)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>labels</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}{{unimplemented_inline(556743)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>menu</code> & <code>type="menu"</code> {{experimental_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="另见">另见</h2> + +<ul> + <li>实现该接口的HTML元素:{{ HTMLElement("button") }}</li> +</ul> |