Question

有人知道是否可以在html输入类型=数字字段中添加加号？我有一个场景，用户需要输入一个+1到+10或-1到-10的修饰符值。我想让用户非常清楚他们输入的值会增加结果值。因此，如果在正输入值之前添加一个+号，那就太好了。

我在Angular2反应形式中使用此输入和引导样式。所以欢迎使用Angular2指令，boostrap样式甚至是jquery解决方案

到目前为止，我所看到的是在表单控件中添加货币符号，或者添加+和减号按钮来增加和减少值。但这不是我想要的，所以我怀疑这是否可行。

Answer 1

不，不可能。号码字段只接受-，0-9和e输入。作为一种解决方法，您可以在输入之前将+放在HTML中，例如：

＆＃13;

+ <input type="number" />

＆＃13;

或者您可以使用标准type="text"输入，但这意味着创建自己的验证逻辑会使代码更加复杂。

Answer 2

我不认为可以操纵输入。默认值为＆＃34; - ＆＃34;为负数而没有正数的符号。

即使您检查了创建UI框架，例如：

Jquery UI，Bootstrap，Angular Material ......

我想唯一的解决方案是编写自己的自定义代码。

有两种情况可供选择：

1 - 带文字的输入，操作将使用javascript。

2 - 在angular2中创建一个管道并将其提供给该元素。我觉得它比第一个容易得多。

Answer 3

我希望这对你们有帮助！

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
  $(document).on('keypress','#input',function (e) {
    var keyCode = e.which;

    if ($(this).val().trim().charAt(0) == "\u002B") {
       if (  keyCode == 43 ) { 
          return false;
       }
    }
    else{
       for (var i = 1; i < $(this).val().length+1; i++) {
          if(i!=0){
             if (  keyCode == 43 ) { 
                return false;
             }
          }
       }
     }
  });

  $(document).on('input', '#input', function() {
     this.value = this.value.replace(/[^+{1}|^0-9]/g,'');
  });
</script>

加号登录html输入类型=数字

3 个答案: