我如何能在HTML

Question

設計了一種基於區域的手機文本框我想使基於手機文本框在我的HTML頁面。有人知道我該如何做到這一點。 謝謝

Answer 1

根據你想要得到多麼複雜，你可以使用（）和 - 插入的輸入框的簡單背景（雖然小得多以適應）。

更復雜的方法是爲數字的每個部分分配3個文本框。然後把（）和 - 放在盒子之間。儘管這可能會阻止用戶，因爲他們必須在各個框之間選中或點擊。

您可以修改上述方法以包含一些JavaScript，它會在用戶輸入完成後自動將焦點從一個文本框更改爲另一個文本框。這可能會更好，但如果用戶曾嘗試返回並編輯其號碼，則會導致問題。

另一種可以做到這一點的方法是在數字更改後插入（）和 - 自動添加javascript。這可能比上面的方法更好，但仍然會導致編輯時出現問題。在添加號碼之前，它也可能看起來很奇怪。

值得注意的是，沒有真正的電話號碼國際標準。如果有人試圖在您的網站上使用國家或地區代碼，您可能會遇到麻煩。如果我是你，我會堅持經典的文本框，儘可能醜陋。

Answer 2

這是我總是用它的插件。偉大工程：

http://digitalbush.com/projects/masked-input-plugin/

您例如：

jQuery(function($){ 
    $(".phone").mask("(999) 999-9999",{placeholder:" "}); 
}); 

Answer 3

你可以嘗試這樣的事情

<input type="text" id="phoneNumber" placeholder="(123)123-1234" /> 

CSS

#phoneNumber{ 
    margin:1em; 
    border:2px solid #ffc600; 
    font-size:2em; 
    border-radius:10px; 
    padding:.25em; 
} 

例子：http://jsfiddle.net/RgTTt/

注：Placeholder會，在所有現代瀏覽器，使您無論在輸入框等，然後消失，一旦用戶開始在框中鍵入。如果你想括號 - （） - 是彩色的，那麼你將需要使用一些跨度和自定義的一段JavaScript。