2014-12-04 57 views
0

我有兩個字段,其中第二個字段有一個值,並且第一個字段中輸入的任何值都被添加到第二個值。 現在,當它被添加並且第一個字段中輸入的數字被刪除(使用退格鍵刪除)時,第二個字段的值不會返回到原始值。我如何去做這件事?我也不會介意一個更好的方式來處理onkeyup在這種情況下在onkeyup後將javascript字段返回到默認值

HTML:

First: <input type="text" id="vala" onkeyup="sum();" /> 
Second: <input type="text" id="valb" value="12" /> 

JS:

function sum() { 
var first = document.getElementById('vala').value; 
var second = document.getElementById('valb').value; 
var result = parseInt(first) + parseInt(second); 
if (!isNaN(result)) { 
    document.getElementById('valb').value = result; 
      } 
     } 

工作撥弄表示: http://jsfiddle.net/wcvqby2g/

回答

3

我想你在找f或

function sum() { 
    var first = document.getElementById('vala').value; 
    var second = document.getElementById('valb').defaultValue; 
    var result = (parseInt(first) || 0) + parseInt(second); 
    document.getElementById('valb').value = result; 
} 

其中defaultValue property of the input訪問輸入的原始值,即在value屬性中指定的一個。

updated fiddle

+0

我喜歡這個答案,我沒有考慮使用'defaultValue'。漂亮,乾淨,簡單! – 2014-12-04 19:18:38

+0

我喜歡這個回答。 @HowardRenollet說非常乾淨 – ollaollu 2014-12-04 19:20:31

2

它被覆蓋。

您可以存儲原始值是這樣的:

First: <input type="text" id="vala" onkeyup="sum();" /> 
Second: <input type="text" id="valb" value="12" data-default-value="12" /> 

...並添加到您的JS:

else { 
    document.getElementById('valb').value = document.getElementById('valb').dataset.defaultValue; 
} 

這裏有一個小提琴:http://jsfiddle.net/andunai/wcvqby2g/5/

注意data-default-value成爲dataset.defaultValue

+0

或像這樣簡單如果值不會改變。 http://jsfiddle.net/1ektk0ar/ – zackify 2014-12-04 19:14:11

+0

@HowardRenollet正確,但zackify也建議把值放在JS裏面。這也是一個解決方案。 – 2014-12-04 19:15:36

0

這是工作solution--

First: <input type="text" id="vala" onkeyup="sum();" /> 
Second: <input type="text" id="valb" value="12" /> 

<script> 
var second1=document.getElementById('valb').value; 
var first1=document.getElementById('vala').value; 
function sum() { 
var first = document.getElementById('vala').value; 
var second = document.getElementById('valb').value; 
var result = parseInt(first) + parseInt(second1); 
if (!isNaN(result)) { 
    document.getElementById('valb').value = result; 
      } 
      if(first == first1) 
      { 

      document.getElementById('valb').value= second1; 
      } 

     } 
     </script>