I have deduced that the spell check function, as handled by most browsers, only works when the user inputs text and then moves to the next word. I have also deduced that you can "query" the spellchecker by simply move the cursor through a word (i.e clicking the first word and then scrolling down).
I have a tool that takes input text and then produces it in an altered form for the user to see. I want the output text to be subjected to the spell checker.
I am aware of the fact that I could use a javascript spellchecking tool, but I'd like to avoid that if I can get the native tool to work (in large part because users can then define their native spell checker however they'd like).
Two specific questions:
1) Is there any easy way to trigger the spell checker to query every word in an element? Setting spellcheck to "true" does not do this.
2) I think my next best option is to programmatically run the cursor of the list of words, is there a good approach for doing this?
I have the same question. I solved this by focussing on an element and a timeout. It's cerainly not the (best) way to go, but it does it's job.
What it does: it get's the elements (all elements have the not-focussed class on them). While looping through (in reverse, bottom->up), it waits 20 miliseconds in order for the spellchecker to execute.
function enableSpellcheck()
{
setTimeout(function () {
var items = $(".not-focussed").reverse();
if(items.length > 0)
{
var target = items[0];
$(target).focus();
$(target).removeClass("not-focussed");
enableSpellcheck();
}
}, 20);
}
Related
I'm tryin to sort a big html table using JS. It takes a lot of cpu% to rearrange all the rows of this table. I think the big part of this problem is: every time my script moves a pair of rows, the browser starts refreshing the table
So, I'm searching for any way to temporarily tell the browser something like "wait, I'm sorting this table, dont waste CPU for rendering until I'll finish, plz?"
Basically, I need something lke "Memo1.lines.beginupdate / Memo1.lines.endupdate" in delphi >.<
alert(string) stops rendering, and not asyncronous calls, but not loading. You may prompt "too many cells to load, please wait" you may got the desired behavior.
note that, in order to work, string should be a non empty string after trim so a white space is not valid.
You can disable most of the background rendering by disabling displaying of the parent element. Since the parent element is not displayed, client's renderer has nothing to render and also does not recompute sizes. Be aware that when you are updating the content, you will loose focus if it was present wihtin the parent Element.
To achieve something like Memo1.lines.beginupdate and Memo1.lines.endupdate use this:
originalStyleDisplay = myMemo1Div.style.display;
myMemo1Div.style.display = 'none';
try {
mySorting();
} catch() { }
myMemo1Div.style.display = originalStyleDisplay;
I've been using the following code in JavaScript for several months and it appears to work without issue, but I started to wonder why it works and whether or not it is a safe method.
The purpose is simply to keep track of the currently selected HTML element and not perform the function code triggered by an event if the user clicks again upon the currently selected element.
function elem_mouse_evt( evt )
{
if ( evt.currentTarget === elem_mouse_evt.e ) return;
elem_mouse_evt.e = evt.currentTarget;
/* ... */
}
This may be a rather stupid question on my part but why is this different than comparing two objects for equivalence? How does JavaScript make this comparison, since each represents a collection of values?
Thank you.
Addition I left out a very important point that came to mind while considering the posted answer, which is that the function property e has a larger purpose. There is a menu of actions that the user can choose to perform on the current selection and/or its content. I thought it would be more efficient to store the reference in the function property rather than traversing the DOM to search for it by one of its unique attributes. Is that a reasonable method?
The purpose is simply to keep track of the currently selected HTML element and not perform the function code triggered by an event if the user clicks again upon the currently selected element.
Rather than doing what you're asking (uniquely identifying an element), I'd flag that element in some way. One way to do that is to add something to its dataset. I'm guessing though that you'll want to change the styling of this selected element at some point though anyway so that users see it's already selected. In that case, we'll add a class.
// Add an event listener on the container for these elements.
// It's more efficient to have just one event listener, rather than thousands.
document.querySelector('.parent').addEventListener('click', (e) => {
// Ensure what's actually clicked meets the filter
if (!e.currentTarget.matches('.selectable')) {
return;
}
// If it's already selected, don't do anything else! (You can combine this with above.)
if (e.currentTarget.matches('.selected')) {
return;
}
e.currentTarget.classlist.add('selected');
// Perform your other actions here
});
I've written an Excel VBA macro to paste some data into an AngularJS form -- it opens an Internet Explorer (11) window, navigates to the page containing the form, and crawls the document tree looking for certain elements by their ID, changing their values from blank to non-blank strings from the Excel sheet. However, when I submit the form, the form logic treats all the required fields as if they were still blank, drawing a red box around the supposed offending fields. (I can intervene at this point by clicking into each field, typing a random character at the end of the pasted data and immediately deleting it, and this triggers the logic that the required field is now filled.)
I'm not a javascript programmer and didn't design the form (nor can I change it in any way). I can manipulate the DOM elements (focusing and blurring the fields, for example, though that doesn't seem to work), and I can probably run any command that could be entered into the console in the browser debugger. Would any AngularJS expert know a relatively simple way to force the form to check itself?
Have you solved this problem Karim or found any solution? I recently had a project of mine, with the same problem.
Try to find the tag with ng-submit something like what I have 'ng-submit"=submit($event)"'. I referenced the form element and used .submit. In your case, try this:
Set HTMLFormEl = HTML.getElementById("accountNameValue")
HTMLFormEl.Submit
The 'submit' was the one that solved my problem. Let me know if this works for you.
Not a VBA nor AngularJS expert but I noticed that AngularJS has nothing to do in treating the required fields as if they were still blank. Just need to find the correct event to trigger. Just my opinion.
Don't know is my answer is actual or not, but i had the same problem, and i found a solution using Application.SendKeys. The function filling out the form looks like this
Function inputWrite(ByVal str As String, inputEl As Object, ByVal hwnd As LongLong) As Boolean
TryAgain_inputWrite:
strSub = Left(str, Len(str) - 1)
strKey = Right(str, 1)
inputEl.Focus
inputEl.Value = strSub
setToFore hwnd
Application.SendKeys strKey
Application.Wait DateAdd("s", 1, Now)
If (inputEl.Value = str) Then
inputWrite = True
Else
GoTo TryAgain_inputWrite
End If
End Function
setToFore is just a function to always keep the Internet Explorer on top of other applications, so the send key won't miss.
In a spelling game I have created there is a grid that is populated with words. The aim of the game is to spell the words by clicking on the letters on the side, which animate into the empty spaces in the grid. Words are highlighted if they are to be spelt, so the user can see where to go next. The aim of the game is to spell the required amount of words in the grid to complete the game. I usually set this to two, but have just changed it to 3 and the program keeps breaking after I spell the second word.
if (score.right == 3) {
................
................
}
Usually when you spell a word correctly I use a "click.trigger" function to move to the next highlighted word in the grid. At the moment after 2 correct ones the program either just doesn't go onto the next one or goes back to the last one and doesn't allow you to click the letters.
setTimeout(function() {
jQuery('.next-question').trigger('click');
}, 1500);
I have tried to go through with break points but cannot seem to find the issue. Can someone help me to get it working again and tell me where I was going wrong?
At the moment in my game there is no hint pictures or hint sounds so to find the highlighted word you have to use the console. Try answering two right then it will crash.
Here is a fiddle for the broken one: http://jsfiddle.net/smilburn/Dxxmh/101/
Here is a fidddle to a previous one that worked fine: http://jsfiddle.net/smilburn/Dxxmh/100/ (some class names may have changed)
First thing. The images dont show in the new version because for their links, you're using relative path which doesnt exist as far as jsfiddle is concerned. The earlier one uses absolute links. Same thing goes for the audio files.
Next thing, at the beginning you have var definitions like
var hintPic = $("#hintPic")[0];
This statement returns the first element from the set as a plain DOM element. So later when you're trying to show it
hintPic.show();
It wont work because 'show' is a jquery function. Remove the [0]'s from the variable definitions and it should work just fine.
I am working on a game-webpage, and I need to know of a way to capture keyboard input, ie up, down, left right and feed that into my location variable but I don't want to use a text box, in my HTML code for input. I'm already using a element to draw my world. Is there any way that when the game is open on a tab, that all keyboard input apart from and the various browser operator keys will will be capturable without having to have the user click on a specific spot on the screen. I've a very limited experience with HTML, and only need a cone of answer as I am building the game in python in a way that it builds itself into HTML.
I am also using a timed loop, and need to be able to have an onkeypress event to be capturable inside the timed loop.
Which element should I use? Which properties of the element?
In order to capture your presses specifically inside your loop, you'll have to store the currently held keys somewhere, and use the document.onkeydown and document.onkeyup to change them.
var heldKeys = [];
document.onkeydown = function(ev) {
heldKeys.push(ev.keyCode);
}
document.onkeyup = function(ev) {
var i = heldKeys.indexOf(ev.keyCode);
if (i != -1) {
heldKeys.splice(i, 1);
}
}
Now inside your loop, you check the contents of heldKeys. You can just loop through it and act on each key.
Remember that the keyCodes won't correspond exactly to "a" "b" etc, they'll be ascii codes. And you may or may not run into browser compatibility issues.