Button click to turn on spell check

Question

I have a textarea that has spellcheck = "false". I want to have a button that when clicked turns on spellcheck and checks the spelling of what is already typed.
At present, if you enter anything else in the text box after the button click, it checks spelling properly. However, I would like it to spell check what's already there without needing to enter anything additional in textarea.

<textarea id="ta" spellcheck="false"></textarea>
<div>
   <input type="button" id="spell_btn" value="spell check">
</div>

$(document).on('click', '#spell_btn', null, function () {
    $("#ta").attr("spellcheck", "true");
});//close .click

https://jsfiddle.net/906dqtn6/5/

I tried to reset the value using $('#ta').val() but didn't have any effect.

var x = $("#ta").val();
var y = " ";
$("#ta").val(y);
$("#ta").val(x);

Thanks in advance.

for your reff: http://www.w3schools.com/tags/att_global_spellcheck.asp — Suresh Kamrushi, Jun 23 '16 at 10:15
i hope this idea working with you http://stackoverflow.com/questions/11794105/set-new-value-for-an-attribute-using-jquery][1] — ayoub laaziz, Jun 23 '16 at 10:19
sorry for the typo in the question and the fiddle. Yes. I had spellcheck in my actual code both in html and jquery. Still doesn't work. Tried both solutions thus far. Again, the issue is that it isn't spellchecking what was already typed. If I type more, it checks everything typed before and after. But if I type, then press button, it does not check what was previously typed. Please see new fiddle. https://jsfiddle.net/906dqtn6/5/ — vbp13, Jun 23 '16 at 10:32

score 0 · Answer 1 · edited May 23 '17 at 12:09

0

Your HTML attribute should be spellcheck instead of spellchecker (w3schools) and the jQuery should be:

$("#spell_btn").on('click', function () {
    $("#ta").attr("spellcheck", "true");
});

An idea is that maybe you could trigger a keypress or keydown event on button click on your element.
because spellcheck only seems to work as you type (or while the element is in focus), when clicking the button spellcheck may become inactive. To trigger these events:

$("button").on("click",function() {
    $('#ta').keydown();
    $('#ta').keypress();
    $('#ta').keyup();
    $('#ta').blur();
});

See here for reference

edited May 23 '17 at 12:09

Community

1
1

answered Jun 23 '16 at 10:19

wmash

4,032
3
31
69

please see comment below question – vbp13 Jun 23 '16 at 10:33
Please add `contenteditable="true"` to you element. Also, what browser are you using? – wmash Jun 23 '16 at 10:48
I have just attempted to use this myself and other than not being supported in IE 9- it also does not seem to be working in Chrome latest version. Although caniuse says otherwise http://caniuse.com/#search=spellcheck – wmash Jun 23 '16 at 10:50
Also check http://stackoverflow.com/questions/9390429/html5-spellcheck. It is an old post but mentions of the correct browsers. It seems that the built-in HTML spellcheck is not working (poorly maintained) so a 3rd party library might be the way to go – wmash Jun 23 '16 at 10:53
i'm using chrome 51 - spellcheck works generally but won't check previously typed text after button click unless add more text – vbp13 Jun 23 '16 at 10:57

score -2 · Answer 2 · answered Jun 23 '16 at 10:21

Here is a free, open source Javascript library for spell checking that I authored:

https://github.com/LPology/Javascript-PHP-Spell-Checker

There's a link to a live demo at the top. It's designed to have the feel of a spell checker in a desktop word processor. I wrote it after being dissatisified with these same options.

To use, just include the JS and CSS files into your page, and then add this:

var checker = new sc.SpellChecker(
    button: 'spellcheck_button', // opens the spell checker when clicked
    textInput: 'text_box', // HTML field containing the text to spell check
    action: '/spellcheck.php' // URL of the server side script 
);

Button click to turn on spell check

2 Answers2