在jQuery中發生更改後，如何獲取文本框的值？

所以我試圖在文本框發生變化後獲取其值。文本框是空白的，當用戶輸入時，它會自動乘以設置的值。我想要的是獲得計算值，以便我可以添加每個文本框的所有值。我希望你能用這個幫助我。在jQuery中發生更改後，如何獲取文本框的值？

編輯：我創建了這個測試。它不工作。

<!DOCTYPE html> 
<head> 
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 
     <title>Test</title> 
</head> 

<body> 
<input id="first" type="text" onchange="compute()"> 

<script> 
$('#first').on('change', function() { 
    $(this).val($(this).val() * 3); 
}); 
</script> 

<input id="second" type="text" onchange="compute()"> 

<script> 
$('#second').on('change', function() { 
    $(this).val($(this).val() * 3); 
}); 
</script> 


<input id="result" type="text" readonly> 

<script> 
     function compute(){ 
       var myBox1 = document.getElementById('first').value; 
       var myBox2 = document.getElementById('second').value; 
       var result = document.getElemetById('result').value; 
       var grade = first + second; 
       result.value = grade; 
     } 
</script> 


</body> 
</html>

來源

2014-10-11 Benedict John Payot

什麼是您的HTML？你有什麼嘗試？什麼地方出了錯？你卡在哪裏？你想要解決什麼問題？ – 2014-10-11 23:36:47

http://api.jquery.com/change/ – nem035 2014-10-11 23:37:07

不要使用jQuery混合基於屬性的事件。你不需要它們。 jQuery允許每個元素使用多個處理程序，並且還將代碼保存在一起（比HTML中其他位置的其他屬性更好）。

http://jsfiddle.net/TrueBlueAussie/8o2z0agw/1/

$('#first').on('change', function() { 
    $(this).val($(this).val() * 3); 
    compute(); 
}); 

$('#second').on('change', function() { 
    $(this).val($(this).val() * 3); 
    compute(); 
}); 

function compute() { 
    var first = ~~$('#first').val(); 
    var second = ~~$('#second').val(); 
    var result = $('#result'); 
    var grade = first + second; 
    result.val(grade); 
}

你也想用jQuery選擇優先於的getElementById和使用.VAL（）來get.set值。

注意：~~是將值轉換爲整數（而不是parsetInt）的更快捷的快捷方式。如果你的jQuery代碼的元素（這聽起來像它現在是）之前，包括

$('#first,#second').on('change', function() { 
    $(this).val($(this).val() * 3); 
    compute(); 
});

，您：

由於代碼是張玉峯兩個變化處理程序，您可以將它們合併成一個需要將其封裝在DOM就緒處理程序中，以確保在選擇器運行時找到元素。

$(function(){ 
    $('#first,#second').on('change', function() { 
     $(this).val($(this).val() * 3); 
     compute(); 
    }); 
});

注：$(function(){});爲$(document).ready(function(){});

的替代方法DOM準備一個快捷方式被委派的事件處理程序，附接至document，這不需要DOM準備處理程序作爲jQuery選擇運行在事件時間和document在頁面加載期間的任何時間總是存在。

$(document).on('change', '#first,#second', function() { 
    $(this).val($(this).val() * 3); 
    compute(); 
});

這可以通過收聽活動（例如，change（鼓泡到目標元件（在這種情況下的文件），然後施加jQuery選擇起泡元件鏈只，然後將所述函數應用於所述匹配元素引起事件，這意味着一個委託事件可以與可能存在的「後來」的元素工作

來源

2014-10-11 23:56:38

謝謝你。謝謝！這正是我需要的。 – 2014-10-11 23:59:27

嘿男人。小提琴工作正常。但是當我嘗試在我身上進行測試時，沒有任何反應。我已經單獨保存了jquery文件並將其嵌入到我的html文件中。 Butttttttt沒有任何反應。我究竟做錯了什麼？ – 2014-10-12 00:24:04

如果該文件包含在頁面中的元素之前，它需要包含在DOM準備好的處理程序中......我將添加更新。 – 2014-10-12 00:44:23

一個非常簡單的解決方案使用jQuery實現這一目標是：

$('#first, #second').on('change', function() { 
 
    $(this).val($(this).val() * 3); 
 
    if ($("#first").val() != "" && $("#second").val()) 
 
     $("#result").val(parseInt($("#first").val(), 10) + parseInt($("#second").val(), 10)); 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id="first" type="text" /> 
 
<input id="second" type="text" /> 
 
<input id="result" type="text" readonly="true" />

來源

2014-10-11 23:53:39

首先，你可能需要關閉輸入標籤<input ... />

這是一種方法可以使用jQuery實現你想要的東西。有一件事你應該檢查輸入的值是否是一個有效的數字。此外，您需要分別考慮每個輸入，因此即使只輸入一個值，也會計算結果stil。

$('#first').on('change', function() { 
    $(this).val($(this).val() * 3); 
    compute(); 
}); 

$('#second').on('change', function() { 
    $(this).val($(this).val() * 3); 
    compute(); 
}); 

function compute() { 
    var first = parseInt($('#first').val()); 
    var second = parseInt($('#second').val()); 
    var result = 0; 
    if(!isNaN(first)) { 
     result += first; 
    } 
    if(!isNaN(second)) { 
     result += second; 
    } 
    if(result != 0) { 
     $('#result').val(result); 
    } 
}

Here is a working fiddle example

來源

2014-10-11 23:55:44 nem035

關閉輸入是一種很好的做法，它會阻止JSFiddles中的顏色編碼警告，但在任何瀏覽器中都不需要。 – 2014-10-12 09:05:38

是的，你是對的，這就是爲什麼我說「可能」:) – nem035 2014-10-12 17:07:06

我自己拿，而你已經接受了答案，就是：

$('input[type=text]').on('change', function() { 
 
    $(this).val(function(i, v) { 
 
    return parseInt(v, 10) * 3; 
 
    }); 
 
    compute(); 
 
}); 
 

 
function compute() { 
 
    $('#result').val(function() { 
 
    return $('input[type="text"]').not(this).map(function() { 
 
     return parseInt(this.value, 10) || 0; 
 
    }).get().reduce(function(a, b) { 
 
     return a + b; 
 
    }); 
 
    }); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<input id="first" type="text" /> 
 

 
<input id="second" type="text" /> 
 
<input id="result" type="text" readonly>

個

參考文獻：

的JavaScript：
- Array.prototype.reduce()。
- parseFloat()。
的jQuery：
- get()。
- not()。
- map()。
- val()。

來源

2014-10-12 00:01:10

試試這個：之後的元素是聚焦

$('#first').change(...)

改變事件將被調用，因此，如果你想獲得該元素的打字過程中的價值，嘗試

$（'＃first'）。keyup（...）

這裏是一個完整的示例：

<!DOCTYPE HTML> 

<html> 

<head> 
    <title></title> 
    <script src="jquery.min.js" type="text/javascript"></script> 
    <script type="text/javascript"> 

    $(document).ready(function(){ 
     $("#tst").change(function(){ 
     console.log($(this).val()); 
     }); 

     $("#tst").keyup(function(){ 
     console.log($(this).val()); 
     }); 
    }); 
    </script> 
</head> 

<body> 
<input type="text" id="tst"> 
</body> 

</html>

來源

2014-10-12 00:14:53

在jQuery中發生更改後，如何獲取文本框的值？

回答

相關問題