?
This document uses PHP Chinese website manual Release
元素<input type="button"> 是 <input>元素的特殊版本，被用來創(chuàng)建一個(gè)沒有默認(rèn)值的可點(diǎn)擊按鈕。 它已經(jīng)在HTML5被 <button>元素取代
<input type="button" value="Click Me">
注意：雖然<input>類型的元素"button"仍然是完全有效的HTML，但新<button>元素現(xiàn)在是創(chuàng)建按鈕的有利方式，具有一些優(yōu)勢。它支持使用"menu"按鈕作為彈出式菜單觸發(fā)器的類型，并且<button>在開始和結(jié)束標(biāo)簽之間插入標(biāo)簽文本，可以在標(biāo)簽中包括HTML，甚至圖像。
值 | 用作按鈕標(biāo)簽的DOMString |
|---|---|
活動(dòng) | 點(diǎn)擊 |
支持的通用屬性 | 類型和價(jià)值 |
IDL屬性 | 值 |
方法 | 沒有 |
值
一個(gè)<input type="button">元素的value屬性包含DOMString一個(gè)用作按鈕的標(biāo)簽。
<input type="button" value="Click Me">
如果你沒有指定一個(gè)value，你得到一個(gè)空的按鈕：
<input type="button">
Using buttons
<input type="button">元素沒有默認(rèn)行為（與他們相似的：<input type="submit">和<input type="reset">分別用于提交和重置表單）。要使按鈕做任何事情，你必須編寫JavaScript代碼來完成這項(xiàng)工作。
一個(gè)簡單的按鈕
我們首先創(chuàng)建一個(gè)帶有click事件處理程序的簡單按鈕來啟動(dòng)我們的機(jī)器（當(dāng)然，它會(huì)切換value按鈕和下面段落的文本內(nèi)容）：
<form> <input type="button" value="Start machine"></form><p>The machine is stopped.</p>
var btn = document.querySelector('input');var txt = document.querySelector('p');btn.addEventListener('click', updateBtn);function updateBtn() { if (btn.value === 'Start machine') {
btn.value = 'Stop machine';
txt.textContent = 'The machine has started!'; } else {
btn.value = 'Start machine';
txt.textContent = 'The machine is stopped.'; }}該腳本獲取HTMLInputElement表示<input>DOM中的對(duì)象的引用，并將該引用保存在變量中btn。addEventListener()然后用于建立一個(gè)函數(shù)，當(dāng)click按鈕上發(fā)生事件時(shí)將運(yùn)行該函數(shù)。
將鍵盤快捷鍵添加到按鈕
鍵盤快捷鍵（也稱為訪問鍵和鍵盤等價(jià)物）可讓用戶使用鍵盤上的鍵或鍵組合來觸發(fā)按鈕。要添加一個(gè)鍵盤快捷鍵到一個(gè)按鈕——你可以使用accesskey全局屬性。
在這個(gè)例子中，s被指定為訪問鍵（您需要按s加上您的瀏覽器/操作系統(tǒng)組合的特定修飾鍵;請(qǐng)參閱accesskey這些鍵的有用列表）。
<form> <input type="button" value="Start machine" accesskey="s"></form><p>The machine is stopped.</p>
注意：以上例子的問題當(dāng)然是用戶不知道訪問密鑰是什么！在真實(shí)網(wǎng)站中，您必須以不干擾網(wǎng)站設(shè)計(jì)的方式提供此信息（例如，通過提供易于訪問的鏈接指向有關(guān)網(wǎng)站訪問鍵的信息）。
禁用和啟用按鈕
要禁用按鈕，只需disabled在其上指定全局屬性，如下所示：
<input type="button" value="Disable me" disabled>
您可以在運(yùn)行時(shí)通過設(shè)置disabled為true或來啟用和禁用按鈕false。在這個(gè)例子中，我們的按鈕開始啟用，但是如果按下它，它將被禁用btn.disabled = true。setTimeout()然后用一個(gè)函數(shù)在兩秒鐘后將按鈕恢復(fù)到啟用狀態(tài)。
如果該disabled屬性沒有被指定，該按鈕disabled從其父元素繼承它的狀態(tài)。這樣就可以通過將元素組合在一個(gè)容器（如<fieldset>元素）中，然后disabled在容器上進(jìn)行設(shè)置，從而一次啟用和禁用所有元素組。
下面的例子顯示了這一點(diǎn)。這與前面的例子非常相似，除了在按下第一個(gè)按鈕時(shí)disabled設(shè)置了屬性之外<fieldset>- 這會(huì)導(dǎo)致所有三個(gè)按鈕都被禁用，直到兩秒鐘超時(shí)。
注：Firefox將不像其他的瀏覽器，默認(rèn)情況下，堅(jiān)持動(dòng)態(tài)禁用狀態(tài)一的<button>整個(gè)頁面加載。使用該autocomplete屬性來控制此功能。
驗(yàn)證
按鈕不參與約束驗(yàn)證; 他們沒有真正的價(jià)值可以被約束。
示例
下面的例子展示了一個(gè)使用<canvas>元素和一些簡單的CSS和JavaScript 創(chuàng)建的非常簡單的繪圖應(yīng)用程序（為了簡潔，我們將隱藏CSS）。頂部的兩個(gè)控件允許您選擇繪圖筆的顏色和大小。單擊按鈕時(shí)，會(huì)調(diào)用清除畫布的函數(shù)。
<div class="toolbar"> <input type="color" aria-label="select pen color"> <input type="range" min="2" max="50" value="30" aria-label="select pen size"><span class="output">30</span> <input type="button" value="Clear canvas"></div><canvas class="myCanvas"> <p>Add suitable fallback here.</p></canvas>
var canvas = document.querySelector('.myCanvas');var width = canvas.width = window.innerWidth;var height = canvas.height = window.innerHeight-85;var ctx = canvas.getContext('2d');ctx.fillStyle = 'rgb(0,0,0)';ctx.fillRect(0,0,width,height);var colorPicker = document.querySelector('input[type="color"]');var sizePicker = document.querySelector('input[type="range"]');var output = document.querySelector('.output');var clearBtn = document.querySelector('input[type="button"]');// covert degrees to radiansfunction degToRad(degrees) { return degrees * Math.PI / 180;};// update sizepicker output valuesizePicker.oninput = function() {
output.textContent = sizePicker.value;}// store mouse pointer coordinates, and whether the button is pressedvar curX;var curY;var pressed = false;// update mouse pointer coordinatesdocument.onmousemove = function(e) {
curX = (window.Event) ? e.pageX : e.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
curY = (window.Event) ? e.pageY : e.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);}canvas.onmousedown = function() {
pressed = true;};canvas.onmouseup = function() {
pressed = false;}clearBtn.onclick = function() {
ctx.fillStyle = 'rgb(0,0,0)';
ctx.fillRect(0,0,width,height);}function draw() { if(pressed) {
ctx.fillStyle = colorPicker.value;
ctx.beginPath();
ctx.arc(curX, curY-85, sizePicker.value, degToRad(0), degToRad(360), false);
ctx.fill(); } requestAnimationFrame(draw);}draw();規(guī)范
Specification | Status |
|---|---|
HTML Living StandardThe definition of '<input type="button">' in that specification. | Living Standard |
HTML5The definition of '<input type="button">' in that specification. | Recommendation |
瀏覽器兼容性
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
Basic support | 1.0 | 1.0 (1.7 or earlier) | (Yes) | (Yes) | 1.0 |
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
Basic support | (Yes) | 4.0 (4.0) | (Yes) | (Yes) | (Yes) |