將文本框中的默認值保留在焦點上

Question

我在網站上創建了一個默認值爲「DE」的輸入字段（文本）。現在我遇到以下問題。

<input type="text" id="iban" value="DE" /> 

當用戶點擊文本框中的默認值「DE」應該不被刪除，用戶應該只在文本框中的默認值後添加數字。所以我正在尋找一個js函數，它使得文本框的默認值爲只讀。用戶不應該刪除默認值。

如果這是可能的，它是如何工作的？

Answer 1

沒有必要使用JavaScript。簡單的HTML和CSS就可以完成這項工作。

移動DE成<span>到您<input>的左邊：

<span class="iban">DE</span><input type="text" id="iban" /> 

然後定位<span>內部的<input>：

span.iban 
{ 
    position: relative; 
} 

input#iban 
{ 
    margin-left: -25px; 
    padding-left: 25px; 
} 

以上代碼生成：

這是JSFiddle。

Answer 2

你不能使價值的一部分作爲只讀......但是，如果你想用一個簡單的解決方案（沒有的JavaScript），你可以使用兩個輸入：

<input type="text" id="iban-prefix" value="DE" readonly/><input type="text" id="iban-value"/> 

使用它們安排css，並在您的服務器端連接兩個值。

OR：

一個JavaScript的解決方案：在表單上使用「的onsubmit」事件來調用javascript函數來檢查，如果「DE」的前綴是存在於由用戶輸入的值，如果沒有，添加「DE」前綴。

希望這會有所幫助！

Answer 3

你可以試試這個jQuery的：

$(document).ready(function() { 
    $("#iban").keydown(function(event) { 

      if (event.keyCode < 48 || event.keyCode > 57 || event.keyCode == 46 || event.keyCode == 8) { 
       event.preventDefault(); 
      } 

    }); 
}); 

我在這裏找到：https://snipt.net/GerryEng/jquery-making-textfield-only-accept-numeric-values/

編輯：它修改，以防止退格鍵和刪除鍵。

A working fiddle

希望它能幫助！