Waarde
Knop met een waarde
Het value-attribuut van een <input type="button">-element bevat een string die als label van de knop wordt gebruikt. De value biedt de toegankelijke beschrijving voor de knop.
<input type="button" value="Click Me" />Knop zonder waarde
Als u geen value opgeeft, krijgt u een lege knop:
<input type="button" />Knoppen gebruiken
<input type="button">-elementen hebben geen standaardgedrag (hun neven, <input type="submit"> en <input type="reset">, worden respectievelijk gebruikt om formulieren te verzenden en te resetten). Om knoppen iets te laten doen, moet u JavaScript-code schrijven die het werk verricht.
Een basale knop
We beginnen met het maken van een basale knop met een click-gebeurtenishandler die onze machine start (nou ja, het schakelt de value van de knop en de tekstinhoud van de volgende alinea om):
<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.";
}
}Het script haalt een verwijzing op naar het HTMLInputElement-object dat de <input> in de DOM voorstelt, en slaat deze verwijzing op in de variabele button. Vervolgens wordt addEventListener() gebruikt om een functie in te stellen die wordt uitgevoerd wanneer er click-gebeurtenissen op de knop plaatsvinden.
Sneltoetsen aan knoppen toevoegen
Sneltoetsen, ook wel toegangstoetsen (access keys) en toetsenbordequivalenten genoemd, laten de gebruiker een knop activeren met een toets of combinatie van toetsen op het toetsenbord. Om een sneltoets aan een knop toe te voegen — net zoals u zou doen bij elk <input>-element waarvoor dit zinvol is — gebruikt u het globale attribuut accesskey.
In dit voorbeeld is s opgegeven als de toegangstoets (u moet s samen met de specifieke wijzigingstoetsen voor uw combinatie van browser/besturingssysteem indrukken; zie accesskey voor een nuttige lijst hiervan).
<form>
<input type="button" value="Start machine" accesskey="s" />
</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.";
}
}Het probleem met het bovenstaande voorbeeld is natuurlijk dat de gebruiker niet weet wat de toegangstoets is! Op een echte site zou u deze informatie moeten aanbieden op een manier die het ontwerp van de site niet verstoort (bijvoorbeeld door een gemakkelijk toegankelijke link aan te bieden die verwijst naar informatie over de toegangstoetsen van de site).
Een knop uitschakelen en inschakelen
Om een knop uit te schakelen, geeft u het globale attribuut disabled op, zoals hier:
<input type="button" value="Disable me" disabled />Het disabled-attribuut instellen
U kunt knoppen tijdens de uitvoering in- en uitschakelen door disabled in te stellen op true of false. In dit voorbeeld begint onze knop ingeschakeld, maar als u erop drukt, wordt deze uitgeschakeld met button.disabled = true. Vervolgens wordt een setTimeout()-functie gebruikt om de knop na twee seconden terug te zetten naar de ingeschakelde status.
<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);
}De disabled-status overerven
Als het disabled-attribuut niet is opgegeven, erft de knop zijn disabled-status van zijn bovenliggende element. Dit maakt het mogelijk om groepen elementen tegelijk in en uit te schakelen door ze in een container zoals een <fieldset>-element te plaatsen en vervolgens disabled op de container in te stellen.
Het onderstaande voorbeeld laat dit in actie zien. Dit lijkt sterk op het vorige voorbeeld, behalve dat het disabled-attribuut wordt ingesteld op de <fieldset> wanneer de eerste knop wordt ingedrukt — hierdoor worden alle drie de knoppen uitgeschakeld totdat de time-out van twee seconden is verstreken.
<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);
}
In tegenstelling tot andere browsers behoudt Firefox de disabled-status van een <input>-element, zelfs nadat de pagina opnieuw is geladen. Als tijdelijke oplossing kunt u het autocomplete-attribuut van het <input>-element instellen op off. (Zie Firefox bug 654072 voor meer details.)
Validatie
Knoppen doen niet mee aan beperkingsvalidatie; ze hebben geen echte waarde om te beperken.
Voorbeelden
Het onderstaande voorbeeld toont een zeer basale tekenapp, gemaakt met een <canvas>-element en wat CSS en JavaScript (we verbergen de CSS voor de beknoptheid). De bovenste twee besturingselementen laten u de kleur en grootte van de tekenpen kiezen. De knop roept, wanneer erop wordt geklikt, een functie aan die het canvas wist.
<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>body {
background: #cccccc;
margin: 0;
overflow: hidden;
}
.toolbar {
background: #cccccc;
width: 150px;
height: 75px;
padding: 5px;
}
input[type="color"],
input[type="button"] {
width: 90%;
margin: 0 auto;
display: block;
}
input[type="range"] {
width: 70%;
}
span {
position: relative;
bottom: 5px;
}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 size picker 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();Technische samenvatting
| Waarde | Een string die als label van de knop wordt gebruikt |
| Gebeurtenissen | click |
| Ondersteunde gemeenschappelijke attributen |
type en
value
|
| IDL-attributen | value |
| DOM-interface |
|
| Impliciete ARIA-rol | button |