如何禁止删除input text文本框的部分文字？

冼晨晖 · 发表于 2022-9-22 17:32:19

如何禁止删除input text文本框的部分文字，用户只能在后边追加内容

bbjy1391367268 · 发表于 2022-9-22 18:33:25

一年前的问题也还在邀请...醉了
不过挺有意思的
思路

keydown 事件触发的时候
如果是删除操作（其实也不能让用户输入，不过简单起见，示例只是处理了删除操作）（next）
获取当前选区（selectionStart 和 selectionEnd）
- 如果当前 selection 在被保护文字区域 protectedSelection 范围内
  - e.preventDefault() 阻止当前删除操作（next）
- 否则允许删除（next）
done

Vue 简单实现

源码地址：RoamIn/examples
效果预览：GitHub & BitBucket HTML Preview

假设不能删除的部分文字在开头，且不考虑非删除操作

补充

如果文字不在开头，那么，优化的话就是该文本直接作为 props 传入，在 cuetom-textarea 里面 competed 保护选区的范围（protectedSelectionStart，protectedSelectionEnd）。如果文本会有重复输入的，额，放倒产品吧

黄～ · 发表于 2022-9-22 19:34:31

不写在文本框里不就行了。提交时或者提交后再给缀上。

安与骑兵啦 · 发表于 2022-9-22 20:35:37

假如你input的内容是abcdefg
那么onkeyup的时候，判断input的length是否比abcdefg短？如果短则直接替换为abcdefg。
如果length大于等于abcdefg，那么判断indexOf是否为0。如果不是则替换为abcdefg
不过你既然不想让改，那么不如把abcdefg放在label的before里（input不支持before），然后定位到input内，看起来好像在里面一样。再调整下input的样式。最后提交的时候ancdefg+input的内容就ok咯

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script></head><body> <style type="text/css"> label{ position: relative; font-size: 14px; } label:before{ position: absolute; left: 2px; top: 0; content: attr(data-init); } input{ padding-left: 60px; font-size:14px; } </style> <label data-init="kele5240"> <input type="text" /> </label> <button>submit</button> <script type="text/javascript"> jQuery(document).ready(function($) { var initData = $('label').attr('data-init') $('button').on('click', function(event) { alert(initData+$('input').val()) }); }); </script></body></html>

如何禁止删除input text文本框 的部分文字？

如何禁止删除input text文本框的部分文字？