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

Posted 2023-02-23

【中文标题】BootstrapVue - 数字表单输入在 Firefox 中不起作用

【英文标题】：BootstrapVue - Number Form Input not working in 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" 实现此功能，但没有任何效果。

如何实现这种预期行为？

【问题讨论】：

这回答了你的问题吗？

【参考方案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