您是否可以进行文本输入以允许您键入文本,但不允许您删除文本?

时间:2018-05-26 09:51:29

标签: javascript html

我一直在关注How to prevent user from deleting text in a text box和其他类似问题,但我找不到如何做到这一点。

你怎么能写文字',但'不能删除文字'。例如,按下退格键或删除键时是否可以执行任何操作?

我还没有在这个问题上取得领先,所以我真的没有任何代码可以在演示中显示。

只是为了澄清:

我正在尝试制作一个<input type='text'/>,它允许您输入它,但不能删除里面的文字。可能吗?我很确定这是可能的,但我还没有找到这个问题的答案。

如果'可能',那么我需要它在纯Javascript中。除了纯粹的javascript,css和html之外,我真的不喜欢其他的东西。

编辑:

感谢评论员,我现在需要注意一些事项,例如onChange事件。我会在同一时间尝试自己这样做......

感谢@Isacc回答了我的一半问题。我现在就去接受答案。我很确定我现在可以自己解决剩下的问题了。我只需要一些代码就可以了。

@ARN,刚刚解决了大部分剩下的问题!谢谢! :d

@Kavian_K,非常感谢您的帮助! :)

和@ user3210641,谢谢你完成了完整的问题! :)

@Arun Bhat,欢迎来到Stack Overflow!谢谢你提交答案!

4 个答案:

答案 0 :(得分:2)

&#13;
&#13;
var input = document.getElementById('myInput');

input.onkeydown = function() {
    var key = event.keyCode || event.charCode;

    if( key == 8 || key == 46 )
        return false;
};
&#13;
<input id="myInput" type="text" name="firstname" value="Mickey">
&#13;
&#13;
&#13;

请查看上面的代码,检测密钥并通过返回false onkeydown取消操作

答案 1 :(得分:1)

以下功能会阻止用户从cutpaste$( '#txt' ).on( 'keydown', function( e ) { var key = e.keyCode || e.charCode; if ( key == 8 || key == 46 ) e.preventDefault(); } ).on( 'cut paste', function( e ) { e.preventDefault() } )输入框值:

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

<input id="txt" type="text" placeholder="Enter Text">
dplyr::mutate_at

答案 2 :(得分:1)

我不认为之前的答案应该标记为正确,因为您可以通过粘贴新文本或突出显示文本的某些部分并输入来更改输入字段的内容。

这是一个完整的解决方案:

let content = '';

document.getElementById('input').addEventListener('input', function(e) {
  const value = this.value;
  
  if (this.value.length > content.length && value.indexOf(content) === 0) {
    content = value;
    return;
  }
  
  this.value = content;
});
<input id="input" />

说明:每次输入值更改时,它会检查更新的输入值是否比前一个更长(添加了字符),以及是否包含前一个的所有字符 - 如果是,则添加新字符并更新内容变量,否则设置输入值到前一个。

答案 3 :(得分:1)

下面的代码应该可以使用。

function noBackSpace()
{
if(event.keyCode == 8 || event.keyCode == 46)
{
    alert("No Back Space");
    return false;
}
}

<input type="text" name="txt" value="" onkeydown="return noBackSpace()">