輸入字段限制9個字符和3個字符後自動顯示廣告「 - 」

Question

<input id="myText" type="text" placeholder="XXX-XXX-XXX" /></input> 

<script type="text/javascript"> 
    document.getElementById("myText").value.substr(0, 9).match(/.{1,3}/g).join("-"); 
</script> 

Answer 1

當前的JavaScript有幾個問題。首先，您的腳本只會在加載頁面時運行一次，這意味着您在輸入myText之後將不會處理任何輸入。考慮綁定到事件myText - 例如，onkeyup事件。

另一個問題是，當將myText的值拆分爲3個字符的部分時，您的JavaScript沒有考慮到現有的破折號 - 這會導致不希望出現的行爲，其中會在表面上添加更多破折號隨機位置。

最後，正如Tushar在評論中提到的那樣，您需要將值myText設置爲您創建的新處理值。否則這個值最終會被忽略和丟棄，並且你的代碼看起來什麼都不做。

把所有這些組合起來，固定的代碼可能看起來像：

var textInput = document.getElementById("myText"); 
 

 
textInput.onkeyup = function() 
 
{ 
 
    var dashlessInput = textInput.value.replace(/-/g, ""); 
 
    textInput.value = dashlessInput.substr(0, 9).match(/.{1,3}/g).join("-"); 
 
};

<input id="myText" type="text" placeholder="XXX-XXX-XXX" /></input>

希望這有助於！如果您有任何問題，請告訴我。

爲了將來的參考 - 試着通過解釋你想要達到的目標來明確說明你的問題，並明確指出你面臨的問題。這樣，你更有可能吸引好的答案而不是降低價格。