本文介绍了如何使用 JavaScript 在 HTML 输入框中设置默认值，并禁止用户修改该默认值的前缀部分。通过监听输入事件并动态调整输入框的值，可以实现前缀固定且用户可追加内容的效果。同时强调了后端验证的重要性，以确保数据的安全性。
在某些场景下，我们需要在 HTML 输入框中预先填充一些默认值，并且希望用户只能在默认值的基础上进行追加，而不能修改默认值本身。例如，固定前缀的编号生成，或者某些需要强制用户遵循特定格式的输入。本文将介绍如何利用 JavaScript 实现这一功能。
实现原理
核心思路是监听输入框的 input 事件，每当输入框的值发生变化时，都进行检查和调整。具体步骤如下：
- 获取输入框的引用。
- 定义需要固定的前缀字符串。
- 使用正则表达式来匹配和替换输入框中的前缀。
- 在 input 事件处理函数中，首先移除输入框中已有的前缀（防止重复添加），然后再将固定的前缀添加到输入框的值的开头。
代码示例
以下是一个完整的代码示例，展示了如何实现这一功能：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
<!DOCTYPE html>
<html>
<head>
<title>固定前缀的输入框</title>
</head>
<body>
<input type="text" value="AB" id="my-input">
<script>
const inp = document.getElementById('my-input');
const textToPrepend = 'AB';
const prependRegEx = /^(AB?)?/;
inp.addEventListener('input', () => {
inp.value = textToPrepend + (inp.value === textToPrepend ? '' : inp.value.replace(prependRegEx, ''));
});
</script>
</body>
</html>代码解释：
- inp: 获取 id 为 my-input 的输入框元素。
- textToPrepend: 定义需要固定的前缀字符串，这里是 "AB"。
- prependRegEx: 定义一个正则表达式，用于匹配输入框中的前缀。^(AB?)? 表示匹配以 "AB" 开头的字符串，其中 ? 表示 "AB" 可有可无。
- addEventListener('input', ...): 监听输入框的 input 事件。
- inp.value = textToPrepend + (inp.value === textToPrepend ? '' : inp.value.replace(prependRegEx, '')): 这是核心代码。它首先判断输入框的值是否等于前缀，如果是，则不进行任何替换，否则，先使用 replace 方法移除已有的前缀，然后再将固定的前缀 textToPrepend 添加到输入框的值的开头。
注意事项
- 正则表达式的选择： 正则表达式的选择至关重要。需要根据实际的前缀字符串进行调整，确保能够正确匹配和替换。
- 用户体验： 在用户快速输入时，可能会出现闪烁或跳动的情况。可以通过优化代码或使用其他技术来改善用户体验。
- 后端验证： 虽然前端可以限制用户的输入，但为了确保数据的安全性，仍然需要在后端进行验证。防止用户通过其他方式绕过前端的限制，提交不符合格式的数据。例如，用户可以通过浏览器的开发者工具直接修改输入框的值。
总结
通过监听 input 事件并动态调整输入框的值，可以实现 HTML 输入框设置默认值且禁止修改前缀的功能。 这种方法简单易懂，并且可以灵活地应用于各种场景。但是，需要注意用户体验和后端验证，以确保数据的安全性和可靠性。 始终建议在后端进行数据验证，以防止恶意用户绕过前端限制。
