如何获取HTML5输入字段的“字符移动距离”

function getCharacterMoveDistance(inputFieldId) {
  // 步骤1：获取输入字段的值
  var inputField = document.getElementById(inputFieldId);
  var inputValue = inputField.value;

  // 步骤2：创建隐藏的临时元素
  var tempElement = document.createElement('span');
  tempElement.style.visibility = 'hidden';
  tempElement.style.position = 'absolute';

  // 步骤3：设置临时元素的内容
  tempElement.innerHTML = inputValue;

  // 步骤4：将临时元素插入到文档中
  document.body.appendChild(tempElement);

  // 步骤5：获取临时元素的宽度
  var moveDistance = tempElement.offsetWidth;

  // 步骤6：移除临时元素
  document.body.removeChild(tempElement);

  return moveDistance;
}

// 使用示例
var inputFieldId = 'myInputField';
var characterMoveDistance = getCharacterMoveDistance(inputFieldId);
console.log('字符移动距离：', characterMoveDistance);