<input type="button">
类型为button
的<input>元素呈现为简单的按钮,可以根据需要通过分配事件处理程序函数(通常是<a href="/en-US/docs/Web/API/Element/click_event" title="click">click
</a>事件)来对其进行编程以控制网页上任何位置的自定义功能。
试试看
注意:虽然类型为button
的<input>元素仍然是完全有效的 HTML,但现在使用较新的<a href="/en-US/docs/Web/HTML/Element/button"><button></a>元素来创建按钮更为常见。鉴于<a href="/en-US/docs/Web/HTML/Element/button"><button></a>的标签文本插入到开始和结束标记之间,因此您甚至可以在标签中包含 HTML,包括图像。
值
带值的按钮
无值的按钮
如果您未指定value
,则会得到一个空按钮。
<input type="button" />
使用按钮
<input type="button">
元素没有默认行为(它们的同类,<input type="submit">
和<input type="reset">
分别用于提交和重置表单)。要使按钮执行任何操作,您必须编写JavaScript代码来完成工作。
一个简单的按钮
我们将首先创建一个简单的按钮,并带有一个click
事件处理程序,该处理程序启动我们的机器(实际上,它切换按钮的value
和后续段落的文本内容)。
<form>
<input type="button" value="Start machine" />
</form>
<p>The machine is stopped.</p>
const button = document.querySelector("input");
const paragraph = document.querySelector("p");
button.addEventListener("click", updateButton);
function updateButton() {
if (button.value === "Start machine") {
button.value = "Stop machine";
paragraph.textContent = "The machine has started!";
} else {
button.value = "Start machine";
paragraph.textContent = "The machine is stopped.";
}
}
该脚本获取一个指向表示DOM中<input>
的HTMLInputElement
对象的引用,并将此引用保存在变量button
中。addEventListener()
然后用于建立一个函数,当按钮上发生click
事件时,将运行该函数。
向按钮添加键盘快捷键
键盘快捷键,也称为访问键和键盘等效项,允许用户使用键盘上的键或键组合触发按钮。要向按钮添加键盘快捷键——就像您对任何有意义的<input>
一样——您可以使用accesskey
全局属性。
在此示例中,s被指定为访问键(您需要按s加上浏览器/操作系统组合的特定修饰键;请参阅accesskey以获取这些键的有用列表)。
<form>
<input type="button" value="Start machine" accesskey="s" />
</form>
<p>The machine is stopped.</p>
注意:当然,上面关于访问键的示例存在一个问题,即用户不知道访问键是什么!在实际站点中,您必须以不干扰站点设计的方式提供此信息(例如,提供一个易于访问的链接,该链接指向有关站点访问键的信息)。
禁用和启用按钮
要禁用按钮,请在其上指定disabled
全局属性,如下所示。
<input type="button" value="Disable me" disabled />
设置disabled属性
您可以通过将disabled
设置为true
或false
在运行时启用和禁用按钮。在此示例中,我们的按钮最初处于启用状态,但如果您按下它,它将使用button.disabled = true
禁用。然后使用setTimeout()
函数在两秒后将按钮重置回启用状态。
<input type="button" value="Enabled" />
const button = document.querySelector("input");
button.addEventListener("click", disableButton);
function disableButton() {
button.disabled = true;
button.value = "Disabled";
setTimeout(() => {
button.disabled = false;
button.value = "Enabled";
}, 2000);
}
继承disabled状态
如果未指定disabled
属性,则按钮将从其父元素继承其disabled
状态。这使得可以通过将元素包含在一个容器(例如<fieldset>
元素)中,然后在容器上设置disabled
来一次启用或禁用一组元素。
下面的示例展示了它的实际应用。这与前面的示例非常相似,只是当按下第一个按钮时,在<fieldset>
上设置了disabled
属性——这会导致所有三个按钮都被禁用,直到两秒超时过去。
<fieldset>
<legend>Button group</legend>
<input type="button" value="Button 1" />
<input type="button" value="Button 2" />
<input type="button" value="Button 3" />
</fieldset>
const button = document.querySelector("input");
const fieldset = document.querySelector("fieldset");
button.addEventListener("click", disableButton);
function disableButton() {
fieldset.disabled = true;
setTimeout(() => {
fieldset.disabled = false;
}, 2000);
}
注意:与其他浏览器不同,Firefox 即使在页面重新加载后也会保留<input>
元素的disabled
状态。作为解决方法,将<input>
元素的autocomplete
属性设置为off
。(有关更多详细信息,请参阅Firefox bug 654072)。
验证
按钮不参与约束验证;它们没有需要约束的实际值。
示例
下面的示例展示了一个使用<canvas>
元素以及一些简单的CSS和JavaScript创建的非常简单的绘图应用程序(为了简洁起见,我们将隐藏CSS)。前两个控件允许您选择绘图笔的颜色和大小。单击按钮时,将调用一个清除画布的函数。
<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>
const canvas = document.querySelector(".myCanvas");
const width = (canvas.width = window.innerWidth);
const height = (canvas.height = window.innerHeight - 85);
const ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(0 0 0)";
ctx.fillRect(0, 0, width, height);
const colorPicker = document.querySelector('input[type="color"]');
const sizePicker = document.querySelector('input[type="range"]');
const output = document.querySelector(".output");
const clearBtn = document.querySelector('input[type="button"]');
// covert degrees to radians
function degToRad(degrees) {
return (degrees * Math.PI) / 180;
}
// update sizepicker output value
sizePicker.oninput = () => {
output.textContent = sizePicker.value;
};
// store mouse pointer coordinates, and whether the button is pressed
let curX;
let curY;
let pressed = false;
// update mouse pointer coordinates
document.onmousemove = (e) => {
curX = e.pageX;
curY = e.pageY;
};
canvas.onmousedown = () => {
pressed = true;
};
canvas.onmouseup = () => {
pressed = false;
};
clearBtn.onclick = () => {
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();
技术摘要
规范
规范 |
---|
HTML标准 # button-state-(type=button) |
浏览器兼容性
BCD表格仅在浏览器中加载
另请参阅
<input>
和实现它的HTMLInputElement
接口。- 更现代的
<button>
元素。 - CSS属性的兼容性