如何使用 jQuery 在 HTML 输入框中只允许数字空间和分数（1 1/2）格式？

Posted 2023-05-09

【中文标题】如何使用 jQuery 在 HTML 输入框中只允许数字空间和分数（1 1/2）格式？

【英文标题】：How to allow only numbers space and fraction (1 1/2) format in HTML inputbox by using jQuery?

【发布时间】：2021-09-02 21:28:42

【问题描述】：

我正在创建一个网页，其中有一个输入文本，我希望在其中只允许数字空间和分数，例如 (1 1/2, 2 1/4, 4 1/2...)

我们通常将 1 1/2 称为 ONE AND HALF。

我如何使用 jQuery 来做到这一点

这是我在JSFiddle 中的代码，但它没有按预期工作。

<input id="intTextBox">
(function($) 
   $.fn.inputFilter = function(inputFilter) 
return this.on("input keydown keyup mousedown mouseup select contextmenu drop", function() 
  if (inputFilter(this.value)) 
    this.oldValue = this.value;
    this.oldSelectionStart = this.selectionStart;
    this.oldSelectionEnd = this.selectionEnd;
   else if (this.hasOwnProperty("oldValue")) 
    this.value = this.oldValue;
    this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
   else 
    this.value = "";
  
);
 ;
 (jQuery));

 // Install input filters.
 $("#intTextBox").inputFilter(function(value) 
  return /^(?:(?:\d+\s)*\d+\/\d+|\d+)$/.test(value); 
  );

【问题讨论】：

您对哪一部分有困难？在输入中添加regex validation？或者写一个 js/jquery 事件？在哪种情况下，您难以读取输入的值？检查当前事件是数字、空格还是/？设置值？还是您只是希望有人为您提供完整的解决方案？

我只想允许数字空间和分数 Example1: 1 Example2: 1 1/2 Example3: 1/2 Example4: 2 1/4

我们知道您想要什么 - 但我们不知道您为什么做不到。即，您对问题的哪一部分有困难？您在自己的研究/尝试中走了多远？

@freedomn-m 我在 JSFiddle 中添加了我的代码，更新了我的问题链接。

总是检查浏览器控制台，你的小提琴缺少 jquery（从 javascript 框顶部的下拉列表中选择它）（仍然不起作用，但至少你能做到 某事)

【参考方案1】：

您的正则表达式应包含 2 个部分：只有数字和带有可选数字部分的小数：

function test(input) 
  let pattern = /^(?:(?:\d+\s)*\d+\/\d+|\d+)$/;

  console.log(input, pattern.test(input))


test('1');
test('43534');
test('12/234');
test('1/2');
test('23 1/2');
test('1 1/2');
test('1.2');
test('a/b');