Question

我了解在输入[type =＆＃39; number＆＃39;]中只允许使用一个数字，但如果用户插入字母，我不希望我的UI更改。

问题 - 在输入[type =＆＃39; number＆＃39;]中，如果用户插入字母，则光标从其设置位置移动。我该如何阻止这种情况发生？

以下是我的代码：

＆＃13;

.wrapper {
  width: 100%;
  float: left;
  padding: 50px;
}
input.form-control {
  width: 150px;
  height: 40px;
  line-height: 27px;
  margin: 0 auto;
  text-align: center;
  background: #e6e8e7;
}
input.form-control:focus {
  outline: 0;
  border: 1px solid #297560;
  box-shadow: none;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="wrapper">
  <input type="number" class="form-control" placeholder="$" />
</div>

＆＃13;

请帮帮我:)。

Answer 1

我知道javascript或JQuery在这个问题中没有被标记，但是我会这样做：

$("input").keypress(function(e) {
  if (isNaN(String.fromCharCode(e.which) * 1)) {
        return false;
  }
});

Here is the JSFiddle demo

基本上你只需使用type='text'，然后检查已按下的键，并尝试对其进行数字操作。如果结果是非数字（NaN），那么您只需将其取消，从而只允许输入数字。

Answer 2

创建一个函数来检查输入的值是否为数字，并在文本框的onkeypress事件中调用该函数。如果输入的值不是数字，则使用event.preventDefault()来阻止光标移动。

试试这个：

function checkIsNumeric(event) {
        if (event.which != 8 && isNaN(String.fromCharCode(event.which))) {
            event.preventDefault();
        }
    }

.wrapper {
  width: 100%;
  float: left;
  padding: 50px;
}
input.form-control {
  width: 150px;
  height: 40px;
  line-height: 27px;
  margin: 0 auto;
  text-align: center;
  background: #e6e8e7;
}
input.form-control:focus {
  outline: 0;
  border: 1px solid #297560;
  box-shadow: none;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="wrapper">
  <input type="number" class="form-control" placeholder="$" onkeypress="checkIsNumeric(event);" />
</div>

如果在输入中插入字母，如何阻止光标移动[type =＆＃39; number＆＃39;]？

2 个答案: