Question

我正在开展一个项目，用户输入将以英寸+分数英寸为基础。

目前，我们使用一个带有两个字段的方法，一个填充整数值，另一个填充小数值（1 / 16,1 / 8,3 / 16等）

从UI的角度来看，这感觉有点草率，我想知道是否有其他人使用的javascript / jQuery解决方案允许用户输入尺寸大小。

看看HTML5提供的新输入类型，看起来这种类型的输入非常有用，但它还没有被考虑过。

Answer 1

有趣的问题！

开始为此编写一个JSFiddle，但实际的实现花费的时间比我必须花费的时间多一些。我很抱歉用伪代码做这件事。再次抱歉。这就是我要做的事。

input.addEventListener('input', function(event){

  var current_value, separator, formatted_length, output;

  current_value = event.target.value;
  output = document.getElementById('formatted_length');

  // determine input format

    if( current_value.indexOf(".") > -1 ){ separator = 'decimal'; }
    else if( current_value.indexOf("'") > -1 ){ separator = 'inch'; }
    else if( current_value.indexOf("/") > -1 || current_value.indexOf("\\") > -1 ){ 
        separator = 'fraction'; 
    }
    else{ separator = "none"; }

 // write individual handler for each type
 // deal with the weird nuances of each format in a defined code block
 // format the input value into your preferred output value
 // save it to formatted_length

    switch( separator ){

        case 'decimal':
        // handle decimal input formatting here
        break;

        case 'inch':
        // handle inch input formatting here
        break;

        case 'fraction':
        // handle fraction input formatting here
        break;

        case 'none': // fall-through, just in case. no pun intended.
        default:
        // handle unidentified formatting here
        // i'd recommend converting value to integer and throwing an error it fails
        break;
    }

 // output formatted value to the UI
    output.innerHTML = formatted_length;
});

看到我几乎每个数学课都失败了，我不相信自己编写代码来处理通过随机用户输入进行解析并理解它以正确地获得英制或公制格式以及用户的变体可能会尝试。它至少不是直截了当的。

如果您认为这是一个如此简单的问题，请尝试处理此时间戳并输出一个普遍理解的日期：01/10/01

无论如何，很抱歉没有提供一个完整的工作示例，但它需要的工作量比你想象的要多得多。如果您可以这样做，请创建一个开源库来处理这个问题。类似于moment.js的东西

Answer 2

很快你就能做到这样的事情（现在每晚只在FF工作）：

<!DOCTYPE html>
<html lang="en_US">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>    
    <input is="measurement-field" denominator="16" type="number" />

    <script>
      class MeasurementField extends HTMLInputElement {
        constructor() {
          super();

          this.setStep();
        }

        get denominator() {
          return this.getAttribute('denominator')
        }

        set denominator(val) {
          if(val) {
            this.setAttribute('denominator', val)
          } else {
            this.removeAttribute('denominator')
          }
        }

        attributeChangedCallback(e) {
          this.setStep();
        }

        setStep() {
          if (this.denominator) {
            this.step = (1 / this.denominator)
          } else {
            this.step = 1
          }
        }
      }

      if (window.customElements !== undefined) {
        customElements.define('measurement-field', MeasurementField, { extends: "input" });
      }

    </script>
  </body>
</html>

在此处继续检查Chromium中的状态：https://bugs.chromium.org/p/chromium/issues/detail?id=648828&desc=4

HTML <input />表示英寸/维值

2 个答案: