如何防止用户删除文本输入中的前三个字符？

我有一个文本输入，当页面加载时有三个动态生成的字符;我想要的是，当用户在该文件中输入数据时，用户应该无法从输入中移除前三个字符。如何防止用户删除文本输入中的前三个字符？

文本输入可以包含总共10个字符，我们生成的三个字符和用户输入的7个字符。

目前如果用户按退格键，他可以删除所有的字符，但我不想让他们删除前三个字符。

在加载网页的脚本设置在实验室文字输入三个大字：

<input id="Lab" maxlength="10" name="LabWareId" type="text" value="" class="valid"> 

$('#Lab').keyup(function() { 
    if ($(this).val().length == $(this).attr('maxlength')) 
    $('#DateReceived').focus(); 
});

来源

2016-03-30 Agha

你的意思是分= 3最大值= 10？ – Farshid

那么，为什么这些字符在输入的第一位，如果他们不能或不应该被编辑？ –

哦，以及如果用户在不能删除的三位之前插入不同的字符会怎么样？ –

选项1：将3个字符的前缀放在输入之外。从用户体验角度来看，这是最好的。

<p>abc <input id="Lab" maxlength="10" name="LabWareId" type="text" class="valid"></p>

选项2：检查退格按键，防止相应的删除。

$(document).on('keydown', function (e) { 
    if (e.keyCode == 8 && $('#Lab').is(":focus") && $('#Lab').val().length < 4) { 
     e.preventDefault(); 
    } 
});

来源

2016-03-30 20:31:43

我已经投了票，但想指出一些限制。选项2不会阻止用户将文本粘贴到输入中并覆盖前缀。而选项1（与其他答案一样）不会将前缀附加到发送给服务器的实际值。无论如何，这仍然是一个很好的答案。 – Roberto

试试这个（这是不是最好的解决办法，但它的工作原理）：

Fiddle

$(document).ready(function() { 
    $("#tb").on("keyup", function() { 
    var value = $(this).val(); 
    $(this).val($(this).data("initial") + value.substring(3)); 
    }); 
});

请注意，如果我使用鼠标突出显示前3个字符并将它们移动到其他文本的末尾，它将不会发出抱怨，并允许它不是您想要的。

来源

2016-03-30 20:16:37

已投票。选定的答案也具有相同的限制，并且该解决方案实际上编码得更好。 – Roberto

我可能会将3个生成的字符放在输入的左侧，因此用户不认为这些字符是可编辑的。你可以像这样使用bootstrap使它看起来更好。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<label for="basic-url">Enter thingy:</label> 
 
<div class="input-group"> 
 
    <span class="input-group-addon" id="basic-addon3">ABC</span> 
 
    <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3" maxlength="7" placeholder="Enter 7 characters"> 
 
</div>

来源

2016-03-30 20:36:08 goodface87

我加入这个解决方案作为另一种选择可能是有用的人。

它使用jQuery before()方法。它的工作原理与CSS before类似，但也适用于输入元素。但是，您必须添加一些额外样式才能使前缀显示在输入内。

另见：Can I use the :after pseudo-element on an input field?

运行的代码片段尝试

$('#Lab').before('<span class="prefix">' + $('#Lab').data('prefix') + '</span>');

form { 
 
    background-color: lightgray; 
 
    padding: 2em; 
 
} 
 
#Lab { 
 
    border: 1px solid gray; 
 
    border-left: none; 
 
    width: 10em; 
 
} 
 
.prefix { 
 
    color: dimgray; 
 
    background-color: white; 
 
    border: 1px solid gray; 
 
    border-right: none; 
 
    font-family: monospace; 
 
    font-size: 16px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<form> 
 
    <input id="Lab" maxlength="10" name="LabWareId" type="text" data-prefix="123"> 
 
</form>

来源

2016-03-30 21:29:27 Roberto

如何防止用户删除文本输入中的前三个字符？

回答

相关问题