将文本框中的默认值保留在焦点上

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

希望它能帮助！