BootstrapVue - 数字表单输入在 Firefox 中不起作用答案

【问题标题】：BootstrapVue - Number Form Input not working in FirefoxBootstrapVue - 数字表单输入在 Firefox 中不起作用
【发布时间】：2021-08-02 06:40:14
【问题描述】：

使用 BootstrapVue，我在 b-form 中有以下输入元素：

<b-form-input v-model="myTest" type="number" max="9999"></b-form-input>

我想要以下行为：

应该只允许用户输入数字（不能输入字母或其他字符）。我尝试使用 type="number" 实现此功能，但它仅在 Chrome 中有效，在 Firefox 中无效。
用户可以输入的最大数字应为四位数。我尝试使用max="9999" 实现此功能，但没有任何效果。

如何实现这种预期行为？

【问题讨论】：

这回答了你的问题吗？

标签： vue.js bootstrap-4 vuejs2 vue-component

【解决方案1】：

文档中的 boostrap-vue 似乎没有办法做到这一点。不过，您可以使用 vanilla js 来做到这一点：

<b-form-input id="range-1" v-model="value" type="number" onkeyup="parseNum(this)"></b-form-input>

let parseNum = function(scope){ //scope is 'this' which is html input element
  if(parseInt(scope.value)>999) scope.value =9999 // check if too large
  if(isNaN(parseInt(scope.value))) scope.value=1 // check if number
}

请看下面的实际操作：

let parseNum = function(scope){
  if(parseInt(scope.value)>999) scope.value =9999 
  if(isNaN(parseInt(scope.value))) scope.value=1 
}

const app = new Vue({
    data() {
      return {
        value: '2'
      }
    },
}).$mount('#app');

<link href="https://unpkg.com/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.css" rel="stylesheet"/>
<script src="https://unpkg.com/vue@2.6.12/dist/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.js"></script>

<div id="app">
    <label for="range-1">Example range with min and max</label>
    <b-form-input id="range-1" v-model="value" type="number" onkeyup="parseNum(this)"></b-form-input>
    <div class="mt-2">Value: {{ value }}</div>
 </div>

jsfiddle

【讨论】：