如何实现输入框keyup事件触发时自动移除输入的http://与https://前缀？

现有代码存在的问题 #

• 替换逻辑缺陷：使用固定字符串替换仅能匹配小写的http:///https://，大小写混合或全大写的前缀（如HTTP://、Https://）无法被识别；且没有限制匹配位置，会误删URL中间出现的同类字符串。
• 事件触发范围窄：仅绑定keyup事件，只能处理键盘输入场景，用户右键粘贴、浏览器自动填充的内容无法触发前缀清理逻辑。
• 交互体验差：每次修改输入框内容后，光标会自动跳转到文本末尾，用户在内容中间编辑时体验极差。

修复后代码 #

JS部分 #

document.addEventListener("DOMContentLoaded", function() {
  const $input = document.querySelector('.inputbox');
  const $form = document.querySelector('form[name="myForm"]');
  if ($input) {
    // 用input事件覆盖所有输入场景：键盘输入、粘贴、自动填充均可触发
    $input.addEventListener('input', () => {
      // 记录原光标位置，避免修改后光标跳转
      const cursorPos = $input.selectionStart;
      const originLength = $input.value.length;
      // 正则仅匹配开头的http/https前缀，忽略大小写
      $input.value = $input.value.replace(/^https?:\/\//i, '');
      // 调整光标位置到正确位置
      const offset = originLength - $input.value.length;
      $input.selectionStart = $input.selectionEnd = Math.max(0, cursorPos - offset);
    })
  }
  // 提交前二次校验，避免极端场景前缀漏处理
  if ($form) {
    $form.addEventListener('submit', () => {
      $input.value = $input.value.replace(/^https?:\/\//i, '');
    })
  }
});

CSS和HTML部分 #

原有CSS和HTML代码可保留无需修改，功能不受影响。

优化点说明 #

• 正则/^https?:\/\//i中^限定只匹配内容开头的前缀，避免误删URL参数中出现的http字符串，i修饰符实现大小写不敏感匹配，适配所有前缀写法。
• 改用input事件，覆盖所有输入触发场景，不存在漏处理的情况。
• 新增光标位置校准逻辑，用户编辑内容时光标不会异常跳转，交互体验更流畅。
• 新增表单提交前二次校验逻辑，双重保证不会出现前缀残留的问题。

内容的提问来源于stack exchange，提问作者Randy Thomas