文章/答案/技术大牛

发布

社区首页 >问答首页 >使用自定义输入字段以范围格式输入数字[低-高]

问使用自定义输入字段以范围格式输入数字[低-高]
EN

Stack Overflow用户

提问于 2021-01-04 07:45:15

回答 1查看 135关注 0票数 0

问题陈述

在从上一页接收N的情况下，在1-N内接受编号或有效范围。

条件：

输入的任何数字必须在1-N

内，输入的任何范围必须以低-高格式和1<低<高< N

有效。

动态防止无效输入.

样本测试用例

对于N= 45，如果输入为

0 ->删除此数字无效，即在1- N
46 ->的有效范围内删除第二位数字'6‘，因为它使1到45之间的数字大于N
，因为它是有效数字
13-14或12-24，因为它遇到1<低<<高<代码>H 121<<代码>>H 121删除最后一个数字'1’或'6‘，因为它使范围无效H 222/code>f 223

问题

很难输入有效的范围输入，因为当输入范围中的“高”数字时，它会将数字剪辑掉。

当持有“高”数字中的第一个数字并输入第二个数字时，工作正常。这是由于“高”数字中的第一个数字没有触发onkeyup事件。

代码

https://jsfiddle.net/manid2/9onbdamj/5/

需要一些小的改变，我不知道它是什么，因为我不是主要在前端工作。

javascript

html-input

onkeyup

回答 1

Stack Overflow用户

发布于 2021-01-04 08:43:40

如果添加此部分的setTimeout，代码将在计算之前等待一段时间。

    else if (KC_DIGITS.includes(key_pressed)) {
    let that = this
    setTimeout(function(){ 
      if (!parseAndValidateOldVal(regex_res)) {
        console.log("text number value is invalid");
        $(that).val(function(i, val) {
          return val.slice(0, -1);
        });
      }
    }, 1000);
  }

现场演示：

//mz_form_script.js

// global variables
const USER_UPPER_NUM = 45;
const KC_BACKSPACE = 8;
const KC_END = 35;
const KC_HOME = 36;
const KC_ARROW_KEYS = [37, 38, 39, 40];
const KC_NUMPAD_DASH = [109, 173, 189];
var _kc_digits = []; {
  // Digit0 to Digit9
  for (var i = 48; i < 58; ++i) {
    _kc_digits.push(i);
  }
  // Numpad0 to Numpad9
  for (var i = 96; i < 106; ++i) {
    _kc_digits.push(i);
  }
}
const KC_DIGITS = _kc_digits;

$(document).ready(function() {
  // insert num into para
  var user_input_num_p = $("#doc_user_input_p");
  user_input_num_p.text(USER_UPPER_NUM.toString());

  // restrict user input
  var user_input_num_t = $("#doc_cb_3_num_input_1");
  user_input_num_t.attr({
    placeholder: "1-" + Number(user_input_num_p.text()),
    min: 1,
    max: Number(user_input_num_p.text()),
  });
  user_input_num_t.keyup(handleDocCb3NumInput);
});

/**
 * To handle doc cb 3 user input
 *
 * @param {input} event
 */
function handleDocCb3NumInput(event) {
  const key_pressed = event.which;
  var old_val = $(this).val();

  console.log("key_pressed = " + key_pressed);
  console.log("old_val = " + old_val);

  // check for valid characters
  // TODO: below regex does not work correctly with onkeyup
  //(/^(\d{0,5}|\b(\d{0,5}-\d{0,5})\b)$/gm);
  var regex_res = old_val.match(/^(\d{0,5}|(\d{0,5}-\d{0,5}))$/g);
  if (null == regex_res) {
    console.log("regex is invalid, key: " + key_pressed);
    $(this).val(function(i, val) {
      return val.slice(0, -1);
    });
    return;
  } else {
    console.log("regex matched: " + regex_res);
  }

  var key_char = "";
  // valid ctrl keys
  if (
    KC_BACKSPACE == key_pressed ||
    KC_HOME == key_pressed ||
    KC_END == key_pressed ||
    KC_ARROW_KEYS.includes(key_pressed)
  ) {
    console.log("key_pressed is valid ctrl char");
  } else if (KC_NUMPAD_DASH.includes(key_pressed)) {
    key_char = "-";
    console.log("key_pressed is valid char: " + key_char);
  } else if (KC_DIGITS.includes(key_pressed)) {
    let that = this
    setTimeout(function(){ 
      if (!parseAndValidateOldVal(regex_res)) {
        console.log("text number value is invalid");
        $(that).val(function(i, val) {
          return val.slice(0, -1);
        });
      }
    }, 1000);
  }
  // invalid keys
  else {
    console.log("invalid key: " + key_pressed);
    $(this).val(function(i, val) {
      return val.slice(0, -1);
    });
  }
}

function parseAndValidateOldVal(regex_res) {
  var input_val = regex_res.toString();
  // is invalid
  if (input_val.startsWith("-") || input_val.endsWith("-")) {
    return false;
  }
  var input_val_num = Number(input_val);
  // is range and range is valid [1 < l < h < USER_UPPER_NUM]
  if (isNaN(input_val_num)) {
    var res = input_val.split("-", 2);
    var low = Number(res[0]);
    var high = Number(res[1]);
    if (low >= high || low < 1 || high > USER_UPPER_NUM) return false;
  }
  // is single number and [1 < val < USER_UPPER_NUM]
  else if (input_val_num < 1 || input_val_num > USER_UPPER_NUM) {
    return false;
  }
  return true;
}

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>MZ form</title>
  </head>

  <body>
    <h1>Handle form input dynamically</h1>

    <p>User input: <span id="doc_user_input_p" style="font-weight: bold;"></span></p>

    <form id="doc_cb_3" method="get">
      <input type="text" placeholder="1" id="doc_cb_3_num_input_1" name="doc_cb_3_num" />
      <button name="send" type="submit" value="ok">ok</button>
    </form>

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="mz_form_script.js"></script>
  </body>

</html>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/65559214

复制

相似问题

问使用自定义输入字段以范围格式输入数字[低-高]
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用自定义输入字段以范围格式输入数字[低-高]EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用自定义输入字段以范围格式输入数字[低-高]
EN