时间戳

首页 > 解决方案 > 输入 HTML 的 getter 和 setter

javascript - 输入 HTML 的 getter 和 setter

问题描述

我有一个问题，我需要以德语格式在输入字段中输入数字。例如，如果数字是10.5德语格式，那么它将是这样10,5的。这意味着.将替换为,。我的问题是我需要对数字进行计算，这意味着我需要将十进制数字转换为德文格式，然后在完成计算后，需要再次将该值转换为德文格式。所有这些都需要每次手动完成，这很烦人。所以，我的问题是，有什么方法可以为 HTML 输入设置 agetter和一个setter值。jQuery我想如果通过更改功能或用户手动输入的任何方式将值添加到输入字段，它会转换一个十进制数，即10.5德语格式10,5，同样，当我们需要获取特定输入字段的值时，它会自动将德语值转换10,5为十进制数10.5。这个问题有什么解决办法吗？我已经在整个互联网上进行了研究，但无法找到解决方案。

标签： javascripthtmljquery

解决方案

您可以创建一个函数，该函数返回实现所需功能的值 getter、具有相同功能的 setter 和底层元素：

const makeInputWrapper = (selector) => {
  const input = document.querySelector(selector);
  const get = () => Number(input.value.replaceAll(',', '.'));
  const set = (newVal) => {
    const formatted = String(newVal).replace('.', ',');
    input.value = formatted;
  };
  return { input, get, set };
};

const wrapper = makeInputWrapper('.foo');
const val = wrapper.get();
console.log('orig val was', val);
wrapper.set(12.56)
<input class="foo" value="4,1">

推荐阅读