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

Question

我在网站上创建了一个输入字段（文本），默认值为“DE”。现在我遇到了以下问题。

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

当用户点击文本框时，默认值“DE”应不，并且用户只应在文本框中的默认值之后添加数字。所以我正在搜索一个js函数，它使文本框的默认值为readonly。用户不应删除默认值。

如果可以的话，它是如何运作的？

Answer 1

您无法将该值的一部分视为只读...但如果您想使用简单的解决方案（不使用javascript），则可以使用两个输入：

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

使用css排列它们，然后在服务器端连接两个值。

或者：

一个javascript解决方案：在你的表单上使用“onsubmit”事件来调用javascript函数来检查用户输入的值中是否存在“DE”前缀，如果没有，则添加“DE”前缀。< / p>

希望这有帮助！

Answer 2

无需使用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 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

希望它有所帮助！