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.
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
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
);
Related
I'm creating a simple task manager app with PHP, MySQL, & jQuery. I'm adding a feature that will allow users to add a task by clicking a "new task" button, typing into a text field and hitting enter. This is the jQuery I have:
function add_task() {
// Add the "add new task" button
$("<span class='add-new'>Add new item</span>").appendTo(".sub-phase");
// String for the input form
var task_form = '<form class="add-new-task" autocomplete="off"><input type="text" name="new-task" placeholder="Add a new item..." /></form>';
// Display form on button click
$('.add-new').click(function() {
$(task_form).appendTo($(this).parent());
});
// Post results
$('.add-new-task').submit(function(){
var new_task = $('.add-new-task input[name=new-task]').val();
if(new_task != ''){
$.post('includes/add-tasks.php', { task: new_task }, function( data ) {
$('.add-new-task input[name=new-task]').val('');
$(data).appendTo('.task-list').hide().fadeIn();
});
}
return false;
});
}
If I have the form hardcoded in the index.php file, this functionality works as expected. But if the form is created in jQuery like I have it here, then nothing happens on submit. I've searched around but haven't been able to find a solution that works.
Any advice is much appreciated! Thank you.
The issue is that you're not delegating the event. You've setup a submit handler on page load, but not for dynamically created elements.
Change:
$('.add-new-task').submit(function(){
To:
$(document).on('submit', '.add-new-task', function(){
Now the event handler is bound to the document and will trigger for any element on the page with .add-new-task regardless of whether or not it was dynamically created.
Also, of note, you should avoid binding to document where possible, and instead, should bind to the closest static parent element.
Please check the fiddle here - http://jsfiddle.net/kunaldethe/TQa97/
Here jQuery 1.7.2 is used and as answered by Ohgodwhy,
$(document).on('submit', '.add-new-task', function(){
is used instead of
$('.add-new-task').submit(function(){
In the Javascript Console (F12), you can see the request is sent. (Obviously we don't have the next page, so the request is not completed.)
If you use the jQuery with version less then 1.7.2, the code breaks.
Let us know, the environment you are using.
http://jsfiddle.net/5Ha9d/
I am using zeroclipboard plugin to add the text on click the submit button. Everything seems working but i want it to be automated for certain condition. I am not sure which is the correct way of triggering click event. I already tried with default as $('#copy').click();
I know it is in flash but i tried to know whether it is working or not but as long i unable to do this.
Here is the code i tried
//set path
ZeroClipboard.setMoviePath('http://davidwalsh.name/dw-content/ZeroClipboard.swf');
//create client
var clip = new ZeroClipboard.Client();
//event
clip.addEventListener('load', function () {
clip.setText(document.getElementById('box-content').value);
});
clip.addEventListener('complete', function (client, text) {
alert('copied: ' + text);
});
//glue it to the button
clip.glue('copy');
jQuery('#copy').click();
Is there is a way to trigger this submit button on page load. Not sure is something straight forward.
Thanks for your suggestion.
Vicky
According to this thread, you can't simulate a click on the flash object, and have it setData in the clipboard http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/desktop/Clipboard.html#. It's a security precaution by Adobe.
Situation: I have a HTML Form, inside it, i have some <input>'s with some info, and a <input type=submit> that is the Send button, who sends the form content to the url set on action parameter.
Problem: Missing knowledge(i don't know how to do).
Explanation of what i want: I want a hotkey like, for example, hit now on your browser or another common software like Notepad the Alt key of your keyboard. You will see a menu coming down on the top of screen, and some Word that are underlined like this one:
Well, you see the F with a underline, and you know that if you hit the key F the File menu will be opened.
Details: The hotkey that i want, is a little different from the example above, but have the same concept. Because i want to allow the user to Press: Alt + F instead of only F to automatically click on the Button that have F set as hotkey to itself.
This way, i can place one <input id=F type=button> i used attribute ID, for example, and if i press Alt + F the button is automatically clicked.
In theory, maybe its easy, but i really do not know how to do this on Javascript.
Does someone know how to do it?
What you want is something like
<input type="submit" accesskey="F"/>
Now, when the users hits Alt + F (or Alt + Shift + F on Firefox) it will be as though he had clicked on the submit button.
EDIT: to use Alt + F on firefox too see this topic: http://forums.mozillazine.org/viewtopic.php?t=446830
You can change it back to how it was using about:config, change:
ui.key.chromeAccess to 5
ui.key.contentAccess to 4
In Opera, press Shift + Esc. That brings up the access key list for the current page. Then you can press any number from the access key list to follow the respective link. Users can change this keyboard shortcut under Tools > Preferences > Mouse and keyboard.
If you were to use jQuery.hotkeys then you would bind each key or keystroke to a function and deal with it that way.
If you gave your buttons an ID of the key you want them to respond to, you could do something like this:
$(document).ready(function () {
var $doc, altKeys, modified;
$doc = $(document);
modified = function (ev) {
var selector;
selector = '#' + ev.data.replace(/^alt\+/, '');
$('button').css({background: 'transparent'});
$(selector).css({background: 'red'});
};
$('button').each(function () {
var key;
k = $(this).attr('id');
$doc.bind('keydown', 'alt+' + k, modified);
});
});
See this fiddle for a working example
we have some a link with href made by JavaScript:
stackoverflow uk
how can i provide a direct link like this:
stackoverflow uk
when user disable javascript?
I know there is the tag:
<noscript> stackoverflow uk</noscript>
but then the user will see both the broken link and the correct link. How can i delete the broken link from user interface?
Start with a regular link:
<a id="foo" href="http://example.com">example</a>
Then bind a JavaScript event handler to it:
var link = document.getElementById('foo'); // OR some other means to select the link
link.addEventListener('click', myHandler);
function myHandler(evt) {
// Do whatever else you want to do
// ...
// but don't do the normal link behaviour
evt.preventDefault();
}
Further reading: Progressive Enhancement and Unobtrusive JavaScript
Here's some psuedo code:
text
As you can see it uses the normal link that you want to fall back to by default. When a user has JavaScript enabled, that link never executes as onclick runs first. The return false is to prevent the real link from being triggered.
I have this javascript code:
if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0)
{
$(window).load(function()
{
$('input:-webkit-autofill').each(function()
{
var text = $(this).val();
var name = $(this).attr('name');
$(this).after(this.outerHTML).remove();
$('input[name=' + name + ']').val(text);
});
});
}
It is designed to remove the background color of the webkit autofill background color in inputs.
However, it only works sometimes and doesn't work when I click on an input, or a button that executes jQuery async functions at around the same time that the page loads.
What is wrong with this code that makes it not work sometimes, but work other times? What must I adapt?
This is what I am doing: How do you disable browser Autocomplete on web form field / input tag?
But I want to keep autocomplete on, while removing the background. I need this, as the background goes over a background image in my text input, so you can't see it.
Is this what you're attempting? How do you disable browser Autocomplete on web form field / input tag?
if not--
Can you confirm that all the elements are being selected, and that the problem lies in the timing of the browser's autofill? What happens if you use the more common $.ready instead?