如何将输入拆分为多个字段答案

【问题标题】：How to split an input into multiple fields如何将输入拆分为多个字段
【发布时间】：2020-04-18 12:08:31
【问题描述】：

在此输入中，用户必须输入一些坐标。我想做一个有多个字段的输入，用户只能输入数字，这些字段将由硬编码的特殊字符分隔，如°“'

结果应该给我一个像这样的值 2°48'00.2"N 42°12'28.8"W

类似的情况是，当您在网上购物时介绍卡的到期日期，并且 / 已经存在并且在您介绍月份或前 2 个字符时被跳过。

我正在考虑的方法是为每个字段/字符创建一个单独的输入/标签，然后在 javascript 中连接这些值。

但是进行所有这些输入并在单独的变量中获取所有这些值似乎不是一个好的做法。我想给输入占位符提供类似 [00°00'00.0"N 00°00'00.0"W] 的内容，以便用户对格式有所了解。

希望我已经表达得足够清楚了！！

任何想法都会受到赞赏。谢谢

【问题讨论】：

标签： javascript html css reactjs

【解决方案1】：

您可以简单地使用其中一个输入格式库，例如cleave.js。这是我使用这个库的实现：

var cleaveCustom = new Cleave('.input', {
  delimiters: ['°', '\'', '.', '"'],
    blocks: [1, 2, 2, 2, 2, 1],
    uppercase: true
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/cleave.js/1.5.10/cleave.min.js"></script>
<input class="input" placeholder="Enter your coordinates" length="10"/>

【讨论】：

非常接近我希望达到的目标。谢谢

【解决方案2】：

这是toDegreesMinutesAndSeconds 函数，我正在返回您想要的值。你可以操纵它。

let latitude = 38.898556;
let longitude = -77.037852;
console.log(convertDMS(latitude, longitude));

function toDegreesMinutesAndSeconds(coordinate) {
    var absolute = Math.abs(coordinate);
    var degrees = Math.floor(absolute);
    var minutesNotTruncated = (absolute - degrees) * 60;
    var minutes = Math.floor(minutesNotTruncated);
    var seconds = Math.floor((minutesNotTruncated - minutes) * 60);

    return degrees + " " + minutes + " " + seconds;
}

function convertDMS(lat, lng) {
    var latitude = toDegreesMinutesAndSeconds(lat);
    var latitudeCardinal = lat >= 0 ? "N" : "S";

    var longitude = toDegreesMinutesAndSeconds(lng);
    var longitudeCardinal = lng >= 0 ? "E" : "W";

    return latitude + " " + latitudeCardinal + "\n" + longitude + " " + longitudeCardinal;
}

【讨论】：