相关疑难解决方法(0)

在我的表单中,我想使用新的HTML5表单类型,例如<input type="url" />(有关这里类型的更多信息).

The problem is that Chrome wants to be super helpful and validate these elements for me, except that it sucks at it. If it fails the built-in validation, there's no message or indication other than the element getting focus. I prefill URL elements with "http://", and so my own custom validation just treats those values as empty strings, however Chrome rejects that. If I could change its validation rules, that would work …

我试图在文本框中输入文本,因为用户输入了文本(jsfiddle playground):

function edValueKeyPress() {
    var edValue = document.getElementById("edValue");
    var s = edValue.value;

    var lblValue = document.getElementById("lblValue");
    lblValue.innerText = "The text box contains: " + s;

    //var s = $("#edValue").val();
    //$("#lblValue").text(s);    
}

<input id="edValue" type="text" onKeyPress="edValueKeyPress()"><br>
<span id="lblValue">The text box contains: </span>

代码运行没有错误,但该值的中input text框,期间onKeyPress总是值之前的变化:

问题:如何获取文本框的文本onKeyPress？

奖金Chatter

在HTML DOM中有三个与"用户正在输入"相关的事件:

• onKeyDown
• onKeyPress
• onKeyUp

在Windows中,WM_Key当用户按住某个键时,消息的顺序变得很重要,并且该键开始重复:

• WM_KEYDOWN('a')- 用户按下了A键
• WM_CHAR('a')- a已收到用户的字符 …

我走进了一个奇怪的问题.当尝试替换数字输入上的点时,它不会仅替换该点,而是清除整个输入.

$("[data-input-payment-id]").on("keyup", function(e) {
  var test_value = $(this).val().replace(/\./g, "");
  $(this).val(test_value);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" data-input-payment-id="12">

的jsfiddle

如何更改它以便仅删除点？

我正在使用输入类型编号.如果无效,我如何从中获取值.例如,使用类型编号并打印"e",它本身无效.

我正在使用React,但我认为这个问题非常笼统.

onChange(event) {
  console.log(event.target.value) //is empty string when not using number
}

<form novalidate>
  <input type="number" onChange={this.onChange}>
</form>

如果用户键入无效值(例如:"1.2.3")到<input type=number>,然后Chrome和Firefox报告<input>的value财产"",而不是"1.2.3".

那么,如何判断用户输入的无效数字<input>或者只是将其留空？

我尝试使用该valueAsNumber属性,但NaN在两种情况下都是如此.

function showInputValue() {
  const inputValue = document.getElementById("numberInput").value;
  const inputValueAsNumber = document.getElementById("numberInput").valueAsNumber;
  
  console.log(`value is: "${inputValue}"\nvalueAsNumber is: "${inputValueAsNumber}"`);
}

document.getElementById("btn").addEventListener("click", showInputValue)

<input type="number" id="numberInput" placeholder="try entering text"/>
<button id="btn">Show value</button>

刚刚在jQuery中偶然发现了一些奇怪的东西,同时编写了一些验证代码 - 我有一个html5"数字"字段;

<input type="number" class="required numeric" />

然后,我的脚本将查看页面上的每个字段,检查类并根据需要进行验证.我奇怪地注意到,如果我在我的一个数字字段中输入"X",我会得到一个"请在此字段中输入一个值"错误,而不是"这应该是一个数字"错误.经过一些头脑刮擦和大量的调试后,我敲了一个jsFiddle来演示我的理论 - 如果你在一个数字字段中输入一个字符,然后尝试从jquery做一个.val()它会返回任何内容 - 好像字段是空的(我在Chrome中遇到过这种情况 - 不确定它是否在所有浏览器中都能正常工作);

http://jsfiddle.net/shawson/SE46L/3/

这是小提琴 - 输入一些数字,然后几个字母来看疯狂.任何人都知道这是否是设计的,如果是的话......为什么？

我正在撰写一份指令,以验证瑞典社会安全号码(personnummer).要在这样的输入元素上使用:

<input type="text" ng-model="pnr" pnrvalidator />

瑞典社会安全号码的格式为yyyymmdd-nnnn例如19121212-1212

只要我使用,我的指令就可以使用type="text".但由于我希望在移动浏览器上使用数字键盘,然后我改为type="number":

<input type="number" ng-model="pnr" pnrvalidator />

然后我的验证器只有在我的输入中没有输入破折号( - )时才有效,例如191212121212.如果我输入19121212-1212那么它不是有效数字.并且ng-invalid ng-invalid-number类被添加到我的input元素中

当我编写我的指令时,我遵循文档如何修改内置验证器https://docs.angularjs.org/guide/forms 但它似乎不适用于type=number验证,或者我是否错过了什么？我使用角度1.3(和1.4).

我的指令代码:

angular.module('example').directive('pnrvalidator', function(){
return {
    require: 'ngModel',
    link: function(scope, elm, attrs, ctrl) {


    var validatePnr = function(inputString){
        /*
        * My validation logic here. Removed for this example
        */

    };


    ctrl.$validators.number = function(modelValue, viewValue) {
        if (ctrl.$isEmpty(modelValue)) {
          // consider empty models to be valid
          return true;
        }
        if (validatePnr(viewValue)) {
          // it …

这是一个示例表格：

var form = document.querySelector('form');

function detectChange() {
  var inputs = form.querySelectorAll('input');
  for (var input of inputs) {
    if (input.value != input.defaultValue) {
      return true;
    }
  }
}

form.querySelector('button').addEventListener('click', function() {
  if (detectChange() && confirm('Are you sure you want to reset?')) {
    form.reset();
  }
});

<form>
  <input type="number">
  <input type="number" value="7">
  <button type="button">Reset</button>
</form>

我希望即使用户输入非数字值，重置按钮也可以使用。

我正在编写一个小的 javascript 实用程序来进行一些数字计算。几乎所有的输入都是真实的数字（也就是说，我正在用它们做数学运算；它们不是邮政编码之类的）。其中一些数字代表在计算之前要添加到其他数字的修饰符。我希望这些数字显示有符号，如果值大于零，则带有前导加号。这在 Firefox 和 IE 中工作正常，它们对数字输入没有任何特殊作用。然而，Chrome 不允许number输入值中的加号字符，尽管parseFloat可以很好地处理它。现在，我的代码正在手动将 a 添加+到字段的值，这会导致它在 Chrome 中中断。

有什么办法可以让它在 Chrome 中工作吗？显然（在“输入”元素之前或之后生成 CSS 内容）:before在这里对我没有用。理想情况下，我想保留这种number类型；如果一切都失败了，我就可以用text，但我依靠min，max和step属性。

更新：添加novalidate到字段允许加号，但 Chrome 将声明value空字符串的 a。检查元素，当它无效时，我看不到任何获取显示值的方法，即使使用novalidate.

更新：似乎没有什么好的方法可以从无效字段中获取值（How to get the raw value an <input type="number"> field?）。和验证确认min，max和step属性都不允许input[type=text]。除非我想出别的东西，否则我可能会放弃加号。