代码之家 › 专栏 › 技术社区 › maioman

Vue控制输入

vuejs2 vue.js javascript

0

maioman · 技术社区 · 7 年前

<template>
  <div id="app">
    <input :value="tel" @input="setTel" placeholder="only numbers" />
    <p>{{ tel }}</p>
  </div>
</template>

<script>
export default {
  name: "App",
  data: () => ({
    tel: "1234"
  }),

  methods: {
    setTel(v) {
      const val = v.target.value.replace(/[^0-9]/g, "");
      this.tel = val;
      /*this.tel = v.target.value = v.target.value.replace(/[^0-9]/g, "");*/
    }
  }
};
</script>

controlled components

我找到的解决方法(可以在注释中看到)是手动修改输入元素的值,但这有点违背了使用Vue的目的。

我也试过用 v-model ,但问题仍然存在。

codesandbox.

1 回复 | 直到 7 年前

1

4

Ugo Okoro 7 年前

<template>
  <div id="app">
    <input v-model="tel" v-on:keyup="setTel" placeholder="only numbers" />
    <p>{{ tel }}</p>
  </div>
</template>

<script>
export default {
  name: "App",
  data: () => ({
    tel: "1234"
  }),

  methods: {
    setTel(v) {
      const val = v.target.value.replace(/[^0-9]/g, "");
      this.tel = val;
      /*this.tel = v.target.value = v.target.value.replace(/[^0-9]/g, "");*/
    }
  }
};
</script>

我看了一下你的沙盒并做了一些修改,请检查一下这是否是你想要的,现在视图已经更新了。

2

Mohsin Amjad 7 年前

你可以用 <input type=number... 就像这里所说的,但是如果您想要手动处理,那么您可以在handler-like中更改el.target.value

<template>
  <div id="app">
    <input
      :value="tel"
      @input="setTel"
      placeholder="0"
    />
    <p>{{ tel }}</p>
  </div>
</template>

<script>
export default {
  name: "App",
  data: () => ({
    tel: "1234"
  }),

  methods: {
    setTel(v) {
      v.target.value = v.target.value.replace(/[^0-9]/g, "");
      this.tel = v.target.value
      /*this.tel = v.target.value = v.target.value.replace(/[^0-9]/g, "");*/
    }
  }
};
</script>

3

0

Radu DiÈÄ 7 年前

你可以做几件事:

将输入的类型设置为数字 <input type=number . 这将阻止用户输入除数字以外的任何字符。这是由浏览器处理的。
你可以用 v-model @change 检查该值并相应地修改模型。可以添加 number
使用验证框架,如 vuelidate

4

0

tony19 thanksd 7 年前

keyup (这将允许密钥到达输入),您应该处理 keydown . 处理程序应该调用 event.preventDefault() 和 event.stopPropagation()

// ignore non-numeric keys
if (!/\d/.test(v.key)) {
  v.preventDefault()
  v.stopPropagation()
  return false
}

复制粘贴 或删除 ):

// allow all meta keys (including Backspace) to pass through
if (v.metaKey || /(Backspace|Meta)/g.test(v.key)) {
  console.log('ignoring', v.key)
  return
}

input 事件以筛选复制粘贴的值。

// template
<input v-model="tel" @input="onInput" v-on:keydown="setTel" />

// script
onInput(e) {
  if (e.inputType !== 'insertText' && /[^0-9]/g.test(e.target.value)) {
    const val = e.target.value.replace(/[^0-9]/g, "");
    this.tel = val;
    e.preventDefault()
    e.stopPropagation()
    return false
  }
}

demo