【问题标题】:Can you make a text input that allows you to type text, but doesn't allow you to delete text?你能做一个允许你输入文本但不允许你删除文本的文本输入吗?
【发布时间】:2018-05-26 18:18:11
【问题描述】:

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

你如何'能够写文本',但'不能删除文本'。例如,是否可以在按下 Backspace 或 Delete 时不执行任何操作?

我还没有关于这个问题的线索,所以我真的没有任何代码可以在演示中显示。

澄清一下:

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

如果它是“可能的”,那么我需要它使用纯 Javascript。除了纯 javascript、css 和 html,我真的不喜欢其他东西。

编辑:

感谢评论者,我现在有一些事情要注意,例如 onChange 事件。我会同时尝试自己做这件事......

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

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

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

还有@user3210641,感谢您完成完整的问题! :)

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

【问题讨论】:

  • onkeyChange 或 onChangeText 方法,尝试检测击键,防止做任何事情
  • 你为什么要这个?这显然是可能的,但是输入错误时无法使用的输入字段服务器有什么用途?
  • 有没有可能?希望有人可以帮助解决这个问题。很抱歉,我没有任何源代码,因为我完全不知道该怎么做。顺便感谢@Isaac 的帮助。理论上,Luca 有可能吗?
  • @Luca:世界上有如此多的创意或定制用例让这个世界变得有趣。要求purpose imho 有点毫无意义
  • 嘿!投反对票是为了什么?我确保以前没有问过这个问题,它不是重复的,是的...... :( 撕掉我的代表。仍然试图达到 50 个代表才能发表评论

标签: javascript html


【解决方案1】:

var input = document.getElementById('myInput');

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

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

看看上面的代码,它检测到键并通过返回false来取消操作onkeydown

【讨论】:

  • 谢谢! :D 这已经完成了一半。现在我必须弄清楚如何禁用其他方式
  • @Lorddirt:如果它回答了您的问题,请将其标记为答案,作为其他面临类似问题的开发人员的参考,谢谢
  • 提问后延迟 10 分钟才能接受答案。我会在 10 分钟内接受它。太感谢了! :)
  • 为避免剪切文本,您可以添加一个 onchange 事件,如果字符串比之前的值短,您可以将其值重置为之前的值
  • @Lorddirt,不要害怕更改代码,总是自己尝试一下
【解决方案2】:

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

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

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" />

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

【讨论】:

  • 感谢您完成完整的问题! :D
【解决方案3】:

以下功能阻止用户输入deletecutpaste输入框值:

$( '#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">

【讨论】:

  • 谢谢!想要纯 javascript,但我非常感谢您提供帮助! +1 赞成票
【解决方案4】:

下面的代码应该可以工作。

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

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

【讨论】:

  • 新用户您好!欢迎来到堆栈溢出!感谢您回答这个问题! :D
猜你喜欢
  • 1970-01-01
  • 2018-07-29
  • 2014-06-18
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多