因为系统需要要弄个订单输入的体验,所以研究了下,写下了如下的代码:
以下是以单价为优先级别的代码,就是说在改变数量时,是改变总额的,而不是改变单价
而改变单价时是改变总额,改变总额时是改变单价
//只能数字输入
function textNumber()
{
if(event.keyCode<45 || event.keyCode>57)
{
event.keyCode=0;
}
}
//即时改变其他输入筐内容
function changePrice(text)
{
var u=document.getElementById("UnitPrice");//单价
var c=document.getElementById("Count");//数量
var a=document.getElementById("Amount");//总额
var hf=document.getElementById("hf");//隐藏textbox
//这里做小小的说明,因为在改变其中一个输入框值时也会带动其他输入框值的改变,会同时触发其他
onpropertychange事件,所以我在这里做了个简单的锁定控制(像操作系统的cpu一样,呵呵),就是
在执行中一个onpropertychange的时候锁定它,执行完后在解锁,just so :)
var t=text.value;//当前改变的输入框中的值
if(text.id=="UnitPrice")
{
//数量不为空时 计算出总额
if(c.value!="")
{
if(hf.value=="0")
{
hf.value = "1";//锁定onpropertychange事件在UnitPrice
a.value = (t*c.value).toFixed(2);
hf.value = "0";//解锁
}
}
}
else if(text.id=="Count")
{
//单价不为空时 计算出总额
if(u.value!="")
{
hf.value = "1";//锁定onpropertychange事件在Count
a.value = (t*u.value).toFixed(2);
hf.value = "0";//解锁
}
}
else if(text.id=="Amount")
{
//数量不为空时 计算出单价
if(c.value!="")
{
//单onpropertychange事件解锁时
if(hf.value=="0")
{
hf.value = "1";//锁定onpropertychange事件在Amount
u.value = (t/c.value).toFixed(2);
hf.value = "0";//解锁
}
}
}
}
<body>
<form id="Form1" method="post" runat="server">
<div>
<asp:TextBox ID="UnitPrice" runat="server" οnfοcus="select()" οnkeypress="textNumber()" onpropertychange="changePrice(this)"></asp:TextBox><br>
<asp:TextBox ID="Count" runat="server" οnfοcus="select()" οnkeypress="textNumber()" onpropertychange="changePrice(this)"></asp:TextBox><br>
<asp:TextBox ID="Amount" runat="server" οnfοcus="select()" οnkeypress="textNumber()" onpropertychange="changePrice(this)"></asp:TextBox><br>
<INPUT value="0" id="hf" type="hidden"></div>
</form>
</body>