CODEWITHSUNDEEP
javascriptjqueryhtmliossafari
user11536574
user11536574

Reputation:

onblur disables clicks (outside input and clicking other input) on iOS and Mac Safari also force opens the keypad and it wont close - (Jquery )

I have an input field and a currency formatter jquery function to be called on input onkeyup and onblur/onfocusout of
the field with data-type="currency"

Using onfocusout or onblur always disables page clicks and keyboard force open and wont close (by clicking anywhere outside the input or another input) in some Browsers on iOS if not all and safari on mac (check my little list for browsers i've tested)

I've tried both onblur and onfocus and none seems to work on iOS safari and chrome . I also tried to bind the input like this . It works fine on other browsers like chrome and Firefox on android, windows, mac etc. i have a short list of browsers and OS affected .

AFFECTED / MISBEHAVE
-iOS 12
---Safari
---Chrome
---Firefox
---UC Browser (this one works if i try to close the kepad and i can filing form)
note: almost all browsers on ios and safari on mac')


-Mac
--Safari


IT WORKS FINE ON
-Android, Windows and Mac
---Firefox
---Chrome
---IE
---Edge

I reproduced the exact issue on codepen - link below

https://codepen.io/anon/pen/eaMmzb

Here is my html form

<form>
<label for="price">Price</label>
<input type="text" id="price" name="price" required="required" data-type="currency" >

<br />

<label for="test">test</label>
<input type="text">
</form>

And Jquery (version 3.4.1)

// .format all input with data-type="currency" to currency
$("input[data-type='currency']").on({
    keyup: function() {
      formatCurrency($(this));
    },
    blur: function() {
      formatCurrency($(this), "blur");
    }
});

//.format all input with data-type="currency" to currency

function formatNumber(n) {
  return n.replace(/\D/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ",")
} // format number 1000000 to 1,234,567

function formatCurrency(input, blur) {
  var input_currency = ""; //the currency symbol that shows beofore the amount

  var input_val = input.val();
  if (input_val === "") { return; }
  var original_len = input_val.length;
  var caret_pos = input.prop("selectionStart");
  if (input_val.indexOf(".") >= 0) {
    var decimal_pos = input_val.indexOf(".");
    var left_side = input_val.substring(0, decimal_pos);
    var right_side = input_val.substring(decimal_pos);
    left_side = formatNumber(left_side);
    right_side = formatNumber(right_side);
    if (blur === "blur") {
      right_side += "00";
    }
    right_side = right_side.substring(0, 2);
    input_val = input_currency + left_side + "." + right_side;
  } else {
    input_val = formatNumber(input_val);
    input_val = input_currency + input_val;
    if (blur === "blur") {
      input_val += ".00";
    }
  }

  input.val(input_val);
  var updated_len = input_val.length;
  caret_pos = updated_len - original_len + caret_pos;
  input[0].setSelectionRange(caret_pos, caret_pos);
}

I expect the input field to format the field immediately onfocusout and onkeyup .

Upvotes: 0

Views: 419

Answers (1)

04FS
04FS

Reputation: 5820

Have you tried just setting the input value on blur, but not setting a selection range? I’d guess that the latter has something to do with the keyboard showing up again. Setting the range might be necessary to get the correct caret position again while the user is typing - but in the blur case there should be no need for that to begin with, right? After blurring/unfocusing the field, there doesn’t need to be a caret set to any position.

So don’t set a selection range in case you are handling the blur event:

  input.val(input_val);

  if (blur !== "blur") {
    var updated_len = input_val.length;
    caret_pos = updated_len - original_len + caret_pos;
    input[0].setSelectionRange(caret_pos, caret_pos);
  }
}

Upvotes: 0

Related Questions