从表单文本输入字段中删除最后四个字符

Question

我有一个用于数据收集的表格，一个文本输入字段用于跟踪号码。我使用条形码扫描仪扫描运输标签，作为捕获跟踪号的简单方法。然后我将数字粘贴到该字段中。但是，这种来自 FedEx 的特殊类型的运输标签将表格编号添加到跟踪编号的末尾。

有没有办法使用 JavaScript 或 JQuery 检查输入，在粘贴后立即检查输入，如果最后四个字符是“0663”，则删除它们？如果可能，有人可以提供样品吗？

Answer 1

这里：

let code = '123412341234123412340663';
console.log(code.substring(0,code.length-4));

Answer 2

这是一个可行的解决方案。只是运行下面的代码片段。

在 Chrome 中测试。可能需要在其他浏览器中取消注释某些注释代码。

const input = document.getElementById('fred');

const removeEnd = (value) => {
  console.log('value', value);
  if (value.match('0663$')) {
    const newValue = value.slice(0, -4);
    input.value = newValue;
  }
}

input.onkeyup = (evt) => {
  removeEnd(evt.target.value);
}
input.onpaste = (evt) => {
  // might be needed
  // removeEnd(evt.target.value);
}
input.oninput = (evt) => {
  // might be needed
  // removeEnd(evt.target.value);
}

<input id="fred">

Answer 3

以下演示使用：

HTMLFormControlsCollection 访问 <form>、<input> 和 <output> 标签。
oninput事件调用回调函数：lastFour()。 input 事件在已注册的 <input> 标签获取用户输入的任何数据时发生。
substring() and slice() 操作字符串值

// Reference the <form>
var shp = document.forms[0].elements;
// Reference the <input>
var trk = shp.trackingNumber;

// Assign event handler for input event
trk.oninput = lastFour;

// Callback function
function lastFour(e) {
  /*
  Get the value of the tag that the input event 
  occurred on (i.e. <input>)
  */
  var num = e.target.value;

  /*
  if the last 4 chars equals '0663'... [?]
  ...extract the chars from num at start(0) 
  to the fourth to the last(-4 excluded)...[:]
  ...otherwise leave num alone
  */
  var mod = (num.substring(num.length - 4) === '0663') ? num.slice(0, -4) : num;

  // Set the value of <output> to the new value mod
  shp.labelScan.value = mod;
}

<form id='shipping'>
  <label for='trackingNumber'>Tracking Number:
  <input id='trackingNumber' type='number' min='100000000000' max='9999999999999999'> 12 to 16 digits</label><br>
  <output id='labelScan'></output>
</form>

从表单文本输入字段中删除最后四个字符

Remove last four characters from form text input field

javascript

regex

jquery

replace

trim