spellchek property not working on preloaded data

Question

I want to do the spellcheck in all input field and textboxes in one of my html form. To do this I have used the following jquery code:

$(document).ready( function() {
    $("input[type='text'], textarea").prop('spellcheck',true);    
});

The spellcheck option is working fine while filling the form. But its not doing the checking on preloaded form data until the field is not clicked at least.

Please tell me a way to work it on preloaded data.

Thanks in advance.

Answer 1

The issue comes from 2 things needing to be true (As far as my Chrome testing goes).

A) Whitespace is usually what triggers it.

B) The element has to be in focus to trigger the spellcheck

To handles this try something like this:

$(document).ready( function() {
  $("input[type='text'], textarea").each(function(){
    $(this).text( $(this).text() + " ");
    $(this).focus();
    $(this).blur();
  })
});

The only issue with this is you now have whitespace on the end of your inputs. To handle this I'd make sure that on submit you trim trailing whitespace.

Here is a simple jsfiddle: http://jsfiddle.net/seckela/MWLUn/