Hello all!
I want to create a input text field that allows only numbers and that has two buttons in the right of the input field (to increment and decrement the number in the text field), just like a spin field in Java. I want also to make the input text field size independent of the browser font. Is this possible with CSS? Does anyone knows how to do this? Can anyone give me some links to some examples?
The javascript part is simple, but I'm banging my head agains the wall because of the css part.
Thanks in advance,
Migrate<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>spinner</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
<!--
function Spiner(num) {
var obj=document.getElementById('spin');
obj.value=parseInt(obj.value)+num;
}
//-->
</script>
<style type="text/css">
<!--
input {
width:2em;
}
button {
font-weight:bold;
}
-->
</style>
</head>
<body>
<input type="text" id="spin" value="0" />
<button type="button" onclick="Spiner(1);">↑</button>
<button type="button" onclick="Spiner(-1);">↓</button>
</body>
</html>Hello again Fang.
Thanks for your anwser.
Although your code works fine, I want it to have the same look as aspin field in Java. You can see an image in the attachment.
Thanks again,
Migrate
I want to create a input text field that allows only numbers and that has two buttons in the right of the input field (to increment and decrement the number in the text field), just like a spin field in Java. I want also to make the input text field size independent of the browser font. Is this possible with CSS? Does anyone knows how to do this? Can anyone give me some links to some examples?
The javascript part is simple, but I'm banging my head agains the wall because of the css part.
Thanks in advance,
Migrate<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>spinner</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
<!--
function Spiner(num) {
var obj=document.getElementById('spin');
obj.value=parseInt(obj.value)+num;
}
//-->
</script>
<style type="text/css">
<!--
input {
width:2em;
}
button {
font-weight:bold;
}
-->
</style>
</head>
<body>
<input type="text" id="spin" value="0" />
<button type="button" onclick="Spiner(1);">↑</button>
<button type="button" onclick="Spiner(-1);">↓</button>
</body>
</html>Hello again Fang.
Thanks for your anwser.
Although your code works fine, I want it to have the same look as aspin field in Java. You can see an image in the attachment.
Thanks again,
Migrate