只允許輸入字段的一部分不可編輯

我在網上做了一些狩獵，但還沒有找到任何具體的答案。有沒有可能有一個文本字段，其中的默認文本是不可編輯的？只允許輸入字段的一部分不可編輯

例如，假設我需要用戶輸入電話號碼。他們所看到的是：

Input Phone Number: ***-***-****

他們可以編輯任何他們想要的星星。但是，即使該字段完全是空的，也不應該刪除破折號。我已經看到了輸入區域的readonly和disabled標籤，但是這些標籤會渲染整個字段禁用。

我希望用戶能夠輸入信息，而不會改變我設置的默認字符到輸入字段。

下面是一些僞代碼，如果你需要它進行實驗：

<!doctype HTML> 
<html> 
<body> 
    <section> 
     <article> 
      <label>Phone Number Entry: </label> 
      <input type="tel" name="phone" placeholder="123-456-7890" 
             onkeypress='eval(event)' required/> 
      </article> 
    </section> 
</body> 
</html>

來源

2013-07-24 Baelix

電話號碼應允許閱讀，允許分隔符如「 - 」和「」，但不要求。這給處理數據帶來了挑戰，但它不會產生問題中描述的問題。試圖對用戶輸入實施嚴格的格式並不是一個好主意，特別是如果格式不符合國際ITU-T建議（使用空格而不使用連字符作爲推薦的分隔符）。 –

輸入不支持禁用部分地區。您必須使用onkeyup和一些JavaScript代碼來檢查輸入框，並在更改後替換內容。

來源

2013-07-24 18:53:46

只是一個建議，但你可以使用3個單獨的文本輸入的可編輯區域和一些CSS，使他們顯示爲一個單一的輸入。然後可能是一個隱藏的輸入來保存完整的值，這是必要的。

另一種方法是一個（可能是混亂的）JavaScript解決方案，您必須跟蹤關鍵筆劃和光標位置。

來源

2013-07-24 19:25:01 rwalker

純HTML/CSS是不可能的。你將需要一些JavaScript。有一些很好的JS插件支持這個功能。我通常使用meiomask或inputmask。你將擁有限制你的用戶輸入數字（或任何你想要的）的附加功能

他們都依賴於jQuery，但你可以在課程當然寫你自己的解決方案，如果你是它。

使用3個不同輸入的建議方式，並將它們作爲一個大輸入樣式不是IMO的最佳解決方案。用戶將不得不切換字段（通過鼠標或標籤），這會造成混亂，因爲它看起來像一個單一的字段。糟糕的用戶體驗！你可以添加一些JS自動切換字段，但如果你要使用JS，我會去輸入掩碼。而且我還沒有談到額外的工作在服務器端處理3場......

來源

2013-07-24 19:34:08 Pevara

你可以創建一個類似於下面的一個假的輸入：

<style> 
    .fakeInput{ 
     background-color:#FFFFFF; 
     border:1px solid #CCCCCC; 
     border-radius:5px; 
     padding:3px; 
     width:300px; 
    } 

    .fakeInput span{ 
     margin-left:10px; 
    } 
</style> 
<p class="fakeInput">Input Phone Number:<span contentEditable="true" onfocus="this.innerHTML=''">123-456-7890</span></p>

，然後點擊一些元素，從DOM讀取值。

來源

2013-07-24 19:41:49

只允許輸入字段的一部分不可編輯

回答

相關問題