1 <style type="text/css">
 2     #txt_cm1, #txt_inch1, #txt_inch2, #txt_cm2 {
 3         width: 63px;
 4         height: 26px;
 5         margin: 0 5px;
 6         border: solid 1px #ccc;
 7     }
 8     #txt_inch1, #txt_cm2 {
 9         background: #e7e7e7;
10         text-align: right;
11         padding-right: 5px;
12         width: 58px;
13     }
14     .converterCalculation{
15         overflow: hidden;
16         border: 1px solid #e7e7e7;
17         padding: 15px;
18     }
19     .converterCalculation .calculation{
20         color: #000;
21         height: 33px;
22         font-weight: bold;
23         width: 365px;
24         padding-right: 0;
25     }
26     .converterCalculation div.calculation input.last {
27         height: 26px;
28         line-height: 26px;
29         color: #fff;
30         background: #999;
31         padding: 0 5px;
32         margin-left: 5px;
33     }
34 </style>
35 <div class="converterCalculation">
36   <div class="calculation">Converter:
37     <input type="text" id="txt_cm1" onkeypress="keyPress(this)" onkeyup="keyUp(this)" onblur="onBlur(this)" />cm&nbsp;&nbsp;
38     <input type="text" id="txt_inch1" disabled="disabled" value="0.00" />inch
39     <input type="button" class="last" value="Calculation" onclick="Calculation(1)" />
40   </div>
41   <div class="calculation">Converter:
42     <input type="text" id="txt_inch2" onkeypress="keyPress(this)" onkeyup="keyUp(this)" onblur="onBlur(this)" />inch
43     <input type="text" id="txt_cm2" disabled="disabled" value="0.00" />cm&nbsp;&nbsp;
44     <input type="button" class="last" value="Calculation" onclick="Calculation(2)" />
45   </div>
46 </div>
47 <script type="text/javascript">
48 
49 function keyPress(that){
50     that.value.match(/^[\+\-]?\d*?\.?\d*?$/)?that.t_value=that.value:that.value=that.t_value;
51     that.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?)?$/)&&(that.o_value=that.value)
52 }
53 function keyUp(that){
54     that.value.match(/^[\+\-]?\d*?\.?\d*?$/)?that.t_value = that.value:that.value = that.t_value;
55     that.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?)?$/) && (that.o_value=that.value)
56 }
57 function onBlur(that){
58     that.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?|\.\d*?)?$/)?(
59             that.value.match(/^\.\d+$/)&&
60             (that.value=0+that.value),that.value.match(/^\.$/)&&
61             (that.value=0),that.o_value=that.value
62         ):that.value = that.o_value
63 }
64 function Calculation(type){
65     var cm1,inch1,inch2,cm2;
66         type==1 && (
67                 cm1=eval($("#txt_cm1").val()),
68                 cm1==undefined&&(cm1=0),inch1=(cm1/2.54).toFixed(2),
69                 $("#txt_inch1").val(inch1)
70             );
71         type==2 && (
72                 inch2=eval($("#txt_inch2").val()),
73                 inch2==undefined&&(inch2=0),cm2=(inch2*2.54).toFixed(2),
74                 $("#txt_cm2").val(cm2)
75             )
76 }
77 </script>