Sample:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Dynamic Link</title>
</head>
<body>
<input type="text" value="http://www.example.com/" id="input">
<a href="http://www.example.com/" id="link">Linked text</a>
<script>
var link = document.getElementById('link'),
input = document.getElementById('input');
link.onclick = link.oncontextmenu = link.onmousedown = function () {
this.href = input.value;
};
</script>
</body>
</html>
- onclick: called on the left click and keyboard focus + Enter
- oncontextmenu: called on the right click and keyboard context menu
- onmousedown: called on the middle click in Firefox and on the link drag to the address bar
Questions:
- Are there any other ways to navigate to the URL of the link – something I forgot to cover for perfect accessibility?
- Can I reduce the number of events or do I have to use them all?