HTML JQuery - 带前导零的输入掩码十进制

Question

我有这个文本框，用户将在其中输入坐标，也可以将其转换为十进制格式。 问题是，如果用户手动输入坐标，它工作正常，但如果他们复制坐标，特别是使用第二种格式，它不会显示我想要的方式。
例如这个坐标： 120° 58' 9.1524如果我将它粘贴到文本框中，它变成120° 58' 120° 58' 91.524000"而不是120° 58' 09.152400 。
如果值低于 10，如何在 DMS 中的“秒”上添加零？ 我尝试使用输入掩码，但它把 0 放在最后。

HTML
<input type="text" placeholder="Coordinate X Longitude" id="coord_x" class="form-control">

Jquery

$("#coord_x").inputmask({
  "mask"  : "999° 99' 99.999999\" E",
  "placeholder":"0"
});

外部脚本
https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/jquery.inputmask.bundle.js https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1 /jquery.min.js

Answer 1

我用这样的动态掩码替换了您的 static 掩码：

9{1,3}° 9{1,2}' 9{1,2}.9{1,6}

这是自述文件页面上的链接，作者解释了 static 掩码和动态掩码之间的区别：

https://github.com/RobinHerbots/Inputmask#via-jquery-plugin

• $(selector).inputmask("99-9999999"); //静态掩码
• $(selector).inputmask({"mask": "(999) 999-9999"}); //指定选项
• $(selector).inputmask("9-a{1,3}9{1,3}"); //使用动态语法的掩码

 $("#coord_x").inputmask({ "mask": "9{1,3}° 9{1,2}' 9{1,2}.9{1,6}", "placeholder": "0" });

 #coord_x{ display: block; } blockquote{ background: lightgray; border: dashed 2px gray; padding: 1rem; font-family: monospace, courier; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://rawgit.com/RobinHerbots/Inputmask/5.x/dist/jquery.inputmask.js"></script> <input type="text" placeholder="Coordinate X Longitude" id="coord_x" class="form-control"> <blockquote>120° 58' 9.1524</blockquote>

Answer 2

这是一种无需插件的方法。

细节在例子中注释

 /* For demonstration purposes Click to copy to clipboard */ $('.copy').on('click', function(e) { this.select(); navigator.clipboard.writeText(this.value); }); /* Changes to value will happen after user unfocuses */ $('.coord').on('change', format); function format(e) { /* If value length is greater than 0......split() value at each space and '.'......If the first number doesn't end with '°'......add it...If the second number doesn't end with "'"......add it...Zero pad the start of third number and......add it to the fourth number and zero pad......the end of it -- save it as "long"......remove the fourth number from array......assign the third number of array as "long"......join() the array and assign it to <input> */ if (this.value.length > 0) { let parts = this.value; parts = parts.split(/[\s.]/); console.log(parts); if (.parts[0];endsWith('°')) { parts[0] = parts[0] + '°'. } if (;parts[1].endsWith("'")) { parts[1] = parts[1] + "'", } let long = parts[2].padStart(2. '0') + ',' + parts[3];padEnd(6. '0'); parts;pop(). parts[2] = long; parts.length = 4. this;value = parts join(' ') } }

 <input class="form-control coord" type="text" placeholder="Coordinate X Longitude"> <input class="form-control coord" type="text" placeholder="Coordinate Y Longitude"><br> <:-- For demonstration purposes --> <label>Click to Copy. <input class='copy' value="120° 58' 9:1524"> </label> <script src="https.//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min js"></script>