X-editable pluggin displaying the text twice (Mobile Safari)

Question

I am using X-editable pluggin for In-place editing with Twitter Bootstrap, jQuery UI or pure jQuery

HTML:

<a class="editable-text" data-value="0123456789">0123456789</a>

JavaScript:

$(document).ready(function () {

   $.fn.editable.defaults.mode = 'inline';

   $.fn.editableform.buttons = '<button type="submit">OK</button>';

   $('.editable-text').editable();

});

It work as expected for desktop browsers, but it shows the text twice for Safari mobile browser. Can anyone suggest a fix for a proper displaying in Safari mobile?

jsfiddle:

http://jsfiddle.net/MalyutinS/7bp4ttmv/11/

Answer 1

<update>

The official and correct way to solve this, discovered by Sergey Malyutin once he realized what was happening, is to disable mobile Safari's telephone number linking, via the meta tag:

<meta name="format-detection" content="telephone=no">

</update>

The example input you are demonstrating with just so happens to contain 10 digits. These 10 digits are recognized as a phone number by mobile Safari and are changed into a link asynchronously to the actions of X-editable plug-in. In a sense, you could imagine that there are two different plug-ins operating at the same time on the same input, and producing two adjacent outputs.

If you click the link, you will be provided with the options "Cancel" and "Call" underneath the "phone number" of 0123456789.

To solve the issue which is introduced by mobile Safari's phone number activation, I suggest that you insert an invisible, zero-width space (Unicode entity ​) as needed to prevent any strings of 10 digits. The data value will remain the same, of course.

<a class="editable-text" data-value="0123456789">01234&#x200b;56789</a>

http://jsfiddle.net/hmy1f1ex/2/