HTML JQuery - Input Mask Decimal with Leading Zeros-CodePudding

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

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

CodePudding user response：

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" >  
<blockquote>120° 58' 9.1524</blockquote>

CodePudding user response：

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  type="text" placeholder="Coordinate X Longitude">
<input  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>