Can browser highlighted spelling mistake suggestions be detected with JavaScript? - javascript

If you type a spelling mistake in a textarea, most browsers will alert you by highlighting the word somehow, for example, underlining it in red. Is this style change visible to JavaScript? If so, how?

It is not. As far as I know, browsers do not add this functionality to javascript. Even if they did it would probably be highly variable from browser to browser, especially mobile browser. It's possible that the spell correction could be part of the Web Browser Framework, rather than the DOM. It is, in fact, possible to disable spell check on text fields and then implement your own in its place. I know a lot of embedded code editors do this.

Related

<a> tag inside div with window.location - why?

I'm currently trying to fix a few bugs on a website that has been built by some guys.
The thing is, I'm having trouble seeing the point of a few things they've done.
The website has a <div> with an onclick="window.location='foobar'" and inside it an <a> tag. Both lead to the same place.
Is there a reason for that?
Thank you!
Some developers are better than others.
More importantly, developers are human and make mistakes. You've found one.
regarding why a developer would use <button onclick="location='somewhere'">, there's a lot of bad advice on the internet, even on stackoverflow, even by high rep users (not trying to pick on j08691, just making a point).
Additionally, button elements may not contain a elements per the specification, so a nested anchor is invalid.
With all that said, the page probably still works. The thing that makes HTML really powerful is its ability to fail gracefully. Instead of erroring out or preventing the entire page from working, the browser is able to make things work, even when the developer does something silly like writing invalid HTML.
I only see downsides:
The user can't use right-click copy link. It will just copy the javascript
Bots from search engines won't follow the link
Users that have javascript disabled can't navigate using that link
However if I understand you correctly, then there is <a href="foobar"> around it?
If that is true, then that would render the disadvantages I have listed above to not apply.
In this case the author of the website may have used this technique as some sort of a hack to style something on multiple browsers the same way...

How to style/detect highlighted boxes generated from browser native search in page

Is there any way to style the yellow (or whatever color) highlight boxes that show up when you use the browser's native find-in-page function? If so, how?
Additionally, is there any way to detect which elements are highlighted (or even the fact that there are elements highlighted) with JS?
Firefox
From a website: no, there is no way.
An add-on or user (via about:config) may modify the ui.textHighlightForeground and ui.textHighlightBackground preferences.
For the curious: Responsible code.
Chrome
(and likely other webkit/blink browsers)
Nope. Colors are hardcoded.
No idea about IE and other browsers (well, there aren't many left).

Can The Preview Pane in the MarkdownDeep Markdown Editor be Disabled?

I'm working on an ASP.NET MVC project which uses the MarkdownDeep Editor to add a rich editor on top of a basic markdown input textbox (very similar to the Stackoverflow editor window).
Generally it works great. However, in certain scenarios, I would like to disable the preview window. This is automatically generated below the textarea by MDD. Can this be disabled?
Just to be clear, I know I can use CSS to hide the preview. But on some devices it's slow and makes typing painful. I want to entirely turn off that feature. I don't see anything in the docs other than how to customize the preview.
Any ideas?
In the docs it specifically mentions that it is recommended that you have the div preview already in your document because it will be created if it isn't found and consequently, could could a visible page refresh if any re-layout has to occur.
Note: the associated divs are all optional and if missing, the plugin will create them. However... you might experience the page jumping around during load if you do this. ie: it's recommended to explicitly include them.
Thus from the sounds of this, and that there doesn't appear to be any option to turn it off in the API page I would say no, it's not possible.
I am a little confused here: if you don't want the preview, use a regular text area instead of mdd_editor... So, under the scenarios where you don't need the previews, instantiate a plain vanilla editor. What am I missing here?
I know this is old, but I was looking for something else on mdd. I recently had this same requirement.
Just comment out the code
// Update the DOM
if (this.m_divHtml)
this.m_divHtml.innerHTML=output;
in MarkdownDeepEditor.js

making a text edit field

I am a beginner in HTML5, CSS3, and JavaScript. I reached my limit for the use of the trial version of Microsoft's OneNote. I like the program so much, I want to make an equivalent of it as an html version so I won't have to empty my pockets for the paid version.
The part I need help with is the part where you type in your notes. I don't know how to make a text edit field in html. Is it possible to do something like that? I would be satisfied if it could only do the same functions as note pad. Just so long as I am able to do the simple type and edit functions. Can someone show me how to code this or lead me to a site that teaches something like this?
Thanks! Tony.
There are plenty of solutions out there. Nicedit, CKEditor, etc. These all have a Rich text interface, and are javascript managed.
The simplest solution would be to just use a <textarea> which would allow for plain text input only.
The simplest way is to use the <textarea> tag in HTML. See this link too.
You can also use HTML5 Data caching to save your notes locally through your browser after implementing your textarea tags.
Here's a neat little plugin that should be relatively minor to install/use.
https://github.com/ekdevdes/storage.js

Can cufon style form text input and textarea?

Is it possible to do this? I haven't been able to find anything in the documenation that says you CAN'T do it, but the following selector is not working for me:
Cufon.set('fontFamily', 'Museo');
Cufon.set('fontWeight', '300');
Cufon.replace('input.text, input.password, textarea');
Any ideas, or does Cufon simply not support this?
Thanks.
I would strongly advise against it. You would end up introducing tons of usability issues in your site (i.e. no copy/paste and backspace issues). Cufon has it's place in this world, but not on dynamically user edited text.
You would also introduce alot of "jump" behavior into your site since Cufon's JavaScript blocks in the browser until it has all of the required text replaced. This would break the flow of content up in your site.

Categories