如何防止用戶刪除文本輸入中的前三個字符？

我有一個文本輸入，當頁面加載時有三個動態生成的字符;我想要的是，當用戶在該文件中輸入數據時，用戶應該無法從輸入中移除前三個字符。如何防止用戶刪除文本輸入中的前三個字符？

文本輸入可以包含總共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

如何防止用戶刪除文本輸入中的前三個字符？

回答

相關問題