©
이 문서에서는 PHP 중국어 웹사이트 매뉴얼 풀어 주다
元素<input type="button">
是 <input>
元素的特殊版本,被用来创建一个没有默认值的可点击按钮。 它已经在HTML5被 <button>元素取代
<input type="button" value="Click Me">
注意:虽然<input>
类型的元素"button"
仍然是完全有效的HTML,但新<button>
元素现在是创建按钮的有利方式,具有一些优势。它支持使用"menu"
按钮作为弹出式菜单触发器的类型,并且<button>
在开始和结束标签之间插入标签文本,可以在标签中包括HTML,甚至图像。
值 | 用作按钮标签的DOMString |
---|---|
活动 | 点击 |
支持的通用属性 | 类型和价值 |
IDL属性 | 值 |
方法 | 没有 |
一个<input type="button">
元素的value
属性包含DOMString
一个用作按钮的标签。
<input type="button" value="Click Me">
如果你没有指定一个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>
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中的对象的引用,并将该引用保存在变量中btn
。addEventListener()
然后用于建立一个函数,当click
按钮上发生事件时将运行该函数。
键盘快捷键(也称为访问键和键盘等价物)可让用户使用键盘上的键或键组合来触发按钮。要添加一个键盘快捷键到一个按钮——你可以使用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
为true
或来启用和禁用按钮false
。在这个例子中,我们的按钮开始启用,但是如果按下它,它将被禁用btn.disabled = true
。setTimeout()
然后用一个函数在两秒钟后将按钮恢复到启用状态。
如果该disabled
属性没有被指定,该按钮disabled
从其父元素继承它的状态。这样就可以通过将元素组合在一个容器(如<fieldset>
元素)中,然后disabled
在容器上进行设置,从而一次启用和禁用所有元素组。
下面的例子显示了这一点。这与前面的例子非常相似,除了在按下第一个按钮时disabled
设置了属性之外<fieldset>
- 这会导致所有三个按钮都被禁用,直到两秒钟超时。
注:Firefox将不像其他的浏览器,默认情况下,坚持动态禁用状态一的<button>
整个页面加载。使用该autocomplete
属性来控制此功能。
按钮不参与约束验证; 他们没有真正的价值可以被约束。
下面的例子展示了一个使用<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>
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();
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) |