HTML JQuery - Input Mask Decimal with Leading Zeros

Question

I have this textbox where in the user will input a coordinate and can also convert it to Decimal format. The problem is this if the user manually inputs the coordinate, it's working fine but if they copied a coordinate especially with the second format, it doesn't display the way I want to.
For example this coordinate: 120° 58' 9.1524 if I paste that into the textbox, it became 120° 58' 120° 58' 91.524000" instead of 120° 58' 09.152400 .
How can I add a zero on the "second" in DMS if the value is 10 below? I tried using the inputmask but it puts the 0 at the end.

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"
});

External Scripts
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

I replaced your static mask with a dynamic mask like this:

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

Here's a link at the readme page where the author explains the difference between a static mask and a dynamic mask:

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

• $(selector).inputmask("99-9999999"); //static mask
• $(selector).inputmask({"mask": "(999) 999-9999"}); //specifying options
• $(selector).inputmask("9-a{1,3}9{1,3}"); //mask with dynamic syntax

 $("#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

Here's a way to do it without a plugin.

Details are commented in example

 /* 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>