JS函數不適用於多輸入文本字段在Internet Explorer中

我試圖檢查該字段以確定它是否是數字（不包括非數字字符）。如果該字段的值是一個數字，則將其轉換爲兩位十進制格式。目前代碼在FireFox和Chrome中運行，但是我在使用Internet Explorer時遇到了問題（多個版本，特別是在IE8和IE9上測試過）。我一直在搞這個問題幾個小時，一直沒有找到解決問題的辦法。在Internet Explorer中，只有第一個字段可以正常工作。其他字段無法正常工作，Internet Explorer不會觸發錯誤。JS函數不適用於多輸入文本字段在Internet Explorer中

這是在HTML文件中的相關代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 

<head> 
    <script type="text/javascript" src="amount.js"></script> 
</head> 

<body> 
    <input type="text" id="amount1" onChange="changeAmount(this.id);"/> 
    <input type="text" id="amount2" onChange="changeAmount(this.id);"/> 
    <input type="text" id="amount3" onChange="changeAmount(this.id);"/> 
    <input type="text" id="amount4" onChange="changeAmount(this.id);"/> 
    <input type="text" id="amount5" onChange="changeAmount(this.id);"/> 
</body> 
</html>

這是amount.js相關代碼：

function changeAmount(input) 
{ 
    var pattern = /([^0-9\.])+/; 
    var ctl = document.getElementById(input); 
    var myvalue = ctl.value; 

    if(myvalue != "" && !pattern.test(myvalue)) 
    { 
    myvalue = parseFloat(myvalue); 
    myvalue = myvalue.toFixed(2); 
    if(!pattern.test(myvalue)) 
    { 
     ctl.value = myvalue; 
    }else 
    { 
     ctl.value = ''; 
    } 
    } 
}

我要上瀏覽這裏一些更多的線程來看看如果我找不到解決方案。

感謝您提前提供任何幫助。

來源

2013-04-17 JMcCallum88

複製粘貼錯誤？ 'if（myvalue！=「」&&！pattern.text（myvalue））' – jbabey

@jbabey - 好的眼睛，應該是'test'（或match）！ – adeneo

而不是將'this.id'傳遞給函數，只需傳遞'this'即可。然後，你可以用'input'獲取元素，用'input.value'指定它的值，用input.whatever'指定其他值。你可以消除整個'document.getElementById'部分。這不會解決任何問題，它僅僅是一個建議 – Ian

有了這個HTML：

使用此Javascript

<input type="text" id="amount1" onChange="changeAmount(this);"/> 
<input type="text" id="amount2" onChange="changeAmount(this);"/> 
<input type="text" id="amount3" onChange="changeAmount(this);"/> 
<input type="text" id="amount4" onChange="changeAmount(this);"/> 
<input type="text" id="amount5" onChange="changeAmount(this);"/>

嘗試：

function changeAmount(input) { 
    var myvalue = input.value; 
    myvalue = parseFloat(myvalue); 
    if (!isNaN(myvalue)) { 
     input.value = myvalue.toFixed(2); 
    } else { 
     input.value = ""; 
    } 
}

DEMO：http://jsfiddle.net/7rDeg/4/

它採用我的建議傳遞this而不是this.value給函數的變化。

另外，不需要正則表達式。只是試圖用parseFloat解析這個值。如果成功，則用2位小數修正該數字並重新設置輸入值。否則，清除文本框。

UPDATE：

雖然這應該都做工精細，我建議你不要使用內聯事件處理程序。因此，舉例來說，它是理想的使用HTML：

<input type="text" id="amount1" /> 
<input type="text" id="amount2" /> 
<input type="text" id="amount3" /> 
<input type="text" id="amount4" /> 
<input type="text" id="amount5" />

與此Javascript：

function changeAmount() { 
    var myvalue = this.value; 
    myvalue = parseFloat(myvalue); 
    if (!isNaN(myvalue)) { 
     this.value = myvalue.toFixed(2); 
    } else { 
     this.value = ""; 
    } 
} 

function addEvent(element, eventName, callback) { 
    if (element.addEventListener) { 
     element.addEventListener(eventName, callback, false); 
    } else if (element.attachEvent) { 
     element.attachEvent("on" + eventName, callback); 
    } else { 
     element["on" + eventName] = callback; 
    } 
} 

window.onload = function() { 
    var inputs = document.getElementsByTagName("input"); 
    for (var i = 0; i < inputs.length; i++) { 
     if (inputs[i].type === "text") { 
      addEvent(inputs[i], "change", changeAmount); 
     } 
    } 
};

DEMO：http://jsfiddle.net/7rDeg/6/

注：隨着parseFloat，這將剝奪任何尾隨非數字字符。例如，輸入「234.35234a」將被解析爲「234.35234」（因此傳遞!isNaN(myvalue)條件）並固定爲「234.35」。如果你不希望出現這種情況使用：

myvalue = +myvalue;

，而不是parseFloat線。

來源

2013-04-17 19:56:16 Ian

這絕對會使代碼更清潔，謝謝。該代碼似乎仍然在IE 8或9中對於字段2-5仍然因爲某些原因而起作用。不知道那裏發生了什麼。我希望Internet Explorer在getElementById方面遇到了一些麻煩。 – JMcCallum88

@ user2292219在我們的代碼中，沒有什麼東西不適用於IE。你知道IE有奇怪的緩存，對吧？您的代碼位於外部文件中，並且會立即緩存。意思是，如果您進行更改並重新訪問您的頁面，那麼您的更改很可能不會應用。您需要清除緩存。你確定這不是問題嗎？我的jsFiddle有效，不是嗎？ – Ian

我可能會做一些不正確的事情，但jsFiddle似乎不適合我的IE8瀏覽器。它在Chrome中正確加載。 – JMcCallum88

JS函數不適用於多輸入文本字段在Internet Explorer中

回答

相關問題