Question

我正在尝试创建一个仅接受十六进制字符 [A-Fa-f0-9] 的输入框。

我知道有很多选项，但没有一个可以打勾我所有的复选框。

需要限制实际的用户输入（因此，除A-Fa-f0-9之外的其他字符均不允许输入/按键/粘贴）
- 我知道可以通过keyup / keydown / onchange事件来完成此操作，但是我需要在全局范围内启用这种更优雅的解决方案
另一个选项是输入pattern，但这仍然允许用户输入“无效”字符，稍后将在验证失败时显示。

我的想法：

首选：如果可以扩展输入类型：

<input type="hex">

如果可能的话可以使用vue指令（假设q-input是我的组件）：

<q-input v-hex>

因此，我创建了这个vue指令，该指令删除了所有非十六进制字符并将其转换为大写字母：

Vue.directive('hex', {
  update: function (el, binding) {
        console.log('Input ' + binding.value)
    
    var newVal = binding.value.replace(/[^a-fA-F0-9\n\r]+/g, '')
      console.log('New Hex Only Val = ' + newVal.toUpperCase())

    binding.value = newVal
  }
})

但是它不会更新在v模型中传递的参数（保存binding.value的参数）。

这是我的小提琴： https://jsfiddle.net/keechan/nade9cy0/3/

样本输入->预期输出：

123abc-> 123ABC
12hf23dn-> 12F23D

如何更新其各自的v-model参数？请注意，该指令将在全球范围内使用，因此任何地方都无需进行硬编码。

有人帮忙吗？谢谢

Answer 1

Vue.directive('hexonly', {
    bind(el, binding, vnode) {
        const vm = vnode.componentInstance;
        el.__unbindHexonly = vm.$watch('value', value => {
            vm.__emitValue(value.replace(/[^a-fA-F0-9\n\r]+/g, '').toUpperCase());
        }, { immediate: true });
    },
    unbind(el) {
        el.__unbindHexonly && el.__unbindHexonly();
    }
});

https://jsfiddle.net/6bw0zvdm/

Quasar使用一些延迟的模型更新魔术，因此使用特定的私有方法__emitValue（source）

顺便说一句，您无需指定指令表达式（"txt"），v-hexonly就可以使用。

接受仅十六进制输入

1 个答案: