如何使用jQuery为输入框的输入值添加前缀与后缀

问题原因 #

你的原有逻辑会导致前后缀重复叠加：每次keyup触发时，输入框内的值已经是「前缀-内容-后缀」的结构，直接取值拼接会把旧的前后缀也当做用户输入内容再次拼接，最终出现ABC-ABC-用户输入-DEF-DEF这类异常结果。

修正代码 #

HTML部分 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="input" value="">

JS部分 #

const prefix = 'ABC-'
const suffix = '-DEF'

$("#input").on("input", function() {
  // 先剥离已有前后缀，拿到纯用户输入内容
  let rawValue = $(this).val()
  if (rawValue.startsWith(prefix)) {
    rawValue = rawValue.slice(prefix.length)
  }
  if (rawValue.endsWith(suffix)) {
    rawValue = rawValue.slice(0, 0 - suffix.length)
  }
  // 拼接后回写，空输入时不展示前后缀可自行调整
  $(this).val(rawValue ? prefix + rawValue + suffix : '')
})

可选优化 #

如果要避免用户输入时光标自动跳到末尾的问题，可以在回写值之后手动重置光标位置到用户输入的位置：

const prefix = 'ABC-'
const suffix = '-DEF'

$("#input").on("input", function(e) {
  const cursorPos = this.selectionStart
  let rawValue = $(this).val()
  if (rawValue.startsWith(prefix)) {
    rawValue = rawValue.slice(prefix.length)
  }
  if (rawValue.endsWith(suffix)) {
    rawValue = rawValue.slice(0, 0 - suffix.length)
  }
  const finalVal = rawValue ? prefix + rawValue + suffix : ''
  $(this).val(finalVal)
  // 重置光标位置到用户输入的位置，避免跳到末尾
  this.setSelectionRange(cursorPos, cursorPos)
})

内容的提问来源于stack exchange，提问作者Anish Ansari