HTML<输入>用于英寸/尺寸值

HTML <input> for inches / dimensional values

本文关键字：gt lt 输入 HTML 用于      更新时间：2023-09-26

我正在进行一个项目，其中用户输入将以英寸+英寸的分数为单位。

目前，我们使用一种包含两个字段的方法，一个字段填充整数值，另一个字段则填充分数值（1/16、1/8、3/16等）

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

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

有趣的问题！

开始为此编写一个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 的东西

很快你就可以做这样的事情了（现在只在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

相关文章：