2017-02-18 05:37:28 +00:00
|
|
|
<!doctype html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<style>
|
|
|
|
|
body {
|
|
|
|
|
background-color: antiquewhite;
|
|
|
|
|
}
|
|
|
|
|
input[type="number"] {
|
|
|
|
|
background-color: red;
|
|
|
|
|
color: white;
|
|
|
|
|
}
|
|
|
|
|
input[type="number"]:focus {
|
|
|
|
|
background-color: yellow;
|
|
|
|
|
color: red;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body style="background-color: white">
|
|
|
|
|
<input id="input1" type="number" value="0"/>
|
2017-02-24 11:24:06 +00:00
|
|
|
<input id="button1" type="button" value="Click me" ondblclick="increment()">
|
|
|
|
|
<hr>
|
|
|
|
|
<input id="input2" type="text" value="foo"/>
|
|
|
|
|
<input id="button2" type="button" value="Click me" onclick="show()">
|
|
|
|
|
<hr>
|
|
|
|
|
<input id="button3" type="button" value="Click me" onclick="enable()">
|
|
|
|
|
<select id="select1" disabled>
|
|
|
|
|
<option value="foo">foo</option>
|
|
|
|
|
<option value="bar" selected>bar</option>
|
|
|
|
|
</select>
|
|
|
|
|
<hr>
|
|
|
|
|
<input id="input3" type="text" value=""/>
|
|
|
|
|
<input id="button4" type="button" value="Click me" onclick="remove()">
|
2017-02-18 05:37:28 +00:00
|
|
|
<script>
|
|
|
|
|
document.getElementById('input1').onfocus = function() {
|
|
|
|
|
this.value = '9999'
|
|
|
|
|
};
|
|
|
|
|
document.getElementById('input1').onblur = function() {
|
|
|
|
|
this.value = '0'
|
|
|
|
|
};
|
|
|
|
|
function increment() {
|
2017-02-24 11:24:06 +00:00
|
|
|
document.getElementById('input1').value++;
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
function show() {
|
|
|
|
|
document.getElementById('input2').style.display = 'none';
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
function enable() {
|
|
|
|
|
document.getElementById('select1').disabled = false;
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
function remove() {
|
|
|
|
|
document.body.removeChild(document.getElementById('input3'));
|
|
|
|
|
return false;
|
2017-02-18 05:37:28 +00:00
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
