jQuery to Disable IE MS Lync phone number icons

Corporate environments have been pushing out MS Lync as the IM successor to Office Communicator. With that comes a click-to-call plugin that automatically puts a little phone icon next to any detected phone number on a web page. I can only assume that clicking the icon will make a phone call, as if anyone really wants that feature to be on by default.

Unfortunately for web developers, the icon is rendered by inserting markup into the webpage. This is a problem for a number of reasons:

1. The icon looks like it is part of your page, but it's really not. 
2. It even prints with the page. 
3. It screws up your layout because the icon is inserted AFTER the page is rendered and onLoad javascript executes! This plays double issues when using a scrolling tables plugin like jQuery datatables because now the header doesn't lineup with the columns.
4. There is no meta tag to disable the plugin. The only option to disable the plugin is up to the user or administrator, and we know we can't count on users to disable it for us.

Our phone numbers were in the common US format of (555) 555-5555. After some trial-and-error I found that MS Lync does not detect phone numbers that use a non-breaking hyphen (&#8209) instead of the normal hyphens (&#45 and &#4208) (big thanks to this Dashes and Hyphens page).

Now I could have changed our code server-side to render the new hyphen, but this caused issues with our exports to Excel, Word, and PDF. So instead I created a simple jQuery plugin that will replace the common &#45 hyphen with a &#8209 non-breaking hyphen and foil the MS Lync plugin from detecting our phone numbers.

JQuery UI datepicker IE focus fix

The jquery ui datepicker control is quite slick and easy to use, and as you see here it can be customized through various events.

At my current client we have multiple controls on the page that listen for onblur and onchange events to notify of changes to the page (most notably an html5 placeholder enabler). But the datepicker does not send the blur event when a selection happens. Also, our users wanted focus to return the text input field after the date selection. So we need to setup some event handlers to call the blur and focus events upon date selection.

First let’s start with a simple datepicker that is applied to any input field having css class dateInput, with a few extra options:

$("input.dateInput").datepicker({
  changeMonth: true,
  changeYear: true,
  showAnim: "fadeIn",
  yearRange: 'c-30:c+30',
  showButtonPanel: true
});

Adding a blur and change event on datepicker selection is rather easy:

$("input.dateInput").datepicker({
  changeMonth: true,
  changeYear: true,
  showAnim: "fadeIn",
  yearRange: 'c-30:c+30',
  showButtonPanel: true,

  /* blur needed to correctly handle placeholder text */
  onSelect: function(dateText, inst) {
    $(this).blur().change();
  }
});

But adding focus is a little more difficult because of a difference in browser behavior. Simply adding a .focus() to onSelect and onClose will suffice for Chrome and Firefox but IE will reopen the datepicker once it receives the focus. In order to handle IE we can simply implement the beforeShow event handler, returning false when we reach a case where IE should not reopen the datepicker window. I’ve added a fixFocusIE variable to track this:

Hopefully this helps someone else searching for a way to focus on the original input field after selecting a date with the JQuery UI Datepicker control.

Note: A little writeup cross-posted on the OPI blog about making the jquery UI datepicker send blur events when dates change, while handling a quirk with IE:
http://www.objectpartners.com/2012/06/18/jquery-ui-datepicker-ie-focus-fix/