Как разбить вход на несколько полей

Question

При этом вводе пользователи должны будут ввести некоторые координаты. Я хочу сделать ввод с несколькими полями, где пользователи могут вводить только цифры, и эти поля будут разделены жестко закодированными специальными символами, такими как ° "'

. Результат должен дать мне значение, подобное этому 2 ° 48' 00.2 "N 42 ° 12'28.8" W

Нечто подобное происходит, когда вы вводите дату истечения срока действия вашей карты при совершении покупок в Интернете, и это / уже есть и пропускается при вводе месяца или первых 2 символов.

Подход, о котором я думал, состоит в том, чтобы создать отдельный вход / метку для каждого поля / символа, а затем объединить значения в javascript.

Но сделать все эти входные данные и получить все эти значения в отдельные переменные не кажутся хорошей практикой. И я хотел бы дать входному заполнителю что-то вроде [00 ° 00'00.0 "N 00 ° 00'00.0" W], чтобы у пользователя было представление о формате.

Надеюсь, я достаточно ясно выразился !!

Любые идеи будут оценены. Спасибо

Answer 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"/>

Answer 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;
}