I'm writing a form with javascript validation, I'd like to override the browser's built in spell checking.
For example, let's say I'm checking serial numbers and they all pass a regex text. I'd like to highlight the ones who don't in the browser much likes the browser highlights words with invalid spelling.
All I could come up with is disabling the browser's built in spell checking
So to sum it up
Is there a simple way to override a browser's built in spell check (sort of how like you override the comparator when you sort an array in javascript)
If there is not, is there a simple way to emulate such behavior?
Thanks a lot
The short answer; no, there is no Spellcheck API that JavaScript can hook into. Besides these kinda seem like different goals; a spellcheck is about natural language whereas you seem to really want input validation. You'd be better simply applying a different background / border colour or similar hint to the user via CSS when your JavaScript code detects an invalid serial (especially since each browser will render spellcheck errors differently anyway).
I haven't evaluated the code, but CkEditor manages to disable browser spell checking. It has a config setting that's set to true by default: disableNativeSpellChecker
config.disableNativeSpellChecker = true;
The setting is used within the "wysiwygarea" plugin, here's a link to the plugin code: wysiwygarea plugin
Maybe you can use it as a basis for your own code to disable browser spell checking.
Check out the demo from the Url below, it think it might be helpful in your case although it works just with HTML5.
http://jsfiddle.net/0GiS0/ZU74B/
Here is the code they used in the demo:
window.onload = function(){
var support = document.getElementById("support");
if('spellcheck' in document.createElement('textarea'))
{
support.textContent = "Your browser supports spellcheck";
support.style.color = "green";
}
}
Related
There’re currently three ways I know of, to disable annotations in youtube videos:
You can use the YouTube settings. This will not work for me, as I do not have (nor want) an account.
You can use a specialised extension. That might work, but I’d rather not have a full-fledge extension with a ton of options, just for that.
You can use a (ad)blocking extension, and add ||youtube.com/annotations_ to its filters. That suffers from the same issue as the previous point. In addition, it disables them completely, while I simply want them turned off by default (so I have the option to turn them on).
Is it possible to do it using JavaScript? I have a UserScript that already performs some modifications to YouTube’s website, so ideally I’d like to expand it. That’s really the last thing I’m missing.
I ask that answers be constrained to using JS and not browser extensions recommendations. Both because (as mentioned), I already know about those, and because this is as much about the learning process as it is about the result. It’s practice for more UserScripts.
Since youtube sometimes changes the players’s behaviour, I’ll try to keep the code up to date and as robust as possible.
var settings_button = document.querySelector(".ytp-settings-button");
settings_button.click(); settings_button.click(); // open and close settings, so annotations label is created
var all_labels = document.getElementsByClassName("ytp-menuitem-label");
for (var i = 0; i < all_labels.length; i++) {
if ((all_labels[i].innerHTML == "Annotations") && (all_labels[i].parentNode.getAttribute("aria-checked") == "true")) { // find the correct label and see if it is active
all_labels[i].click(); // and in that case, click it
}
}
User's code is correct, settings need to be click & then:
document.querySelectorAll("div[role='menuitemcheckbox']")[1].click()
I added it to my "turn off autoplay & annotations" script: https://gist.github.com/Sytric/4700ee977f427e22c9b0
Previously working JS:
document.querySelectorAll("div[aria-labelledby=\"ytp-menu-iv\"]")[0].click()
I know you don't want to use an extension for this but it is the most flexible and easy way to solve your problem.
Extension gives us the power to use a background script through which we can inject css and javascript to opened web page.
I made one extension on this
https://chrome.google.com/webstore/detail/hide-labels-and-end-cards/jinenhpepbpkepablpjjchejlabbpken
This also has a stop-start button for which I just inject the opposite code as before.
If you need any further help on this, i will be happy to do so.
iv_load_policy (supported players: AS3, AS2, HTML5)
Values: 1 or 3. Default is 1. Setting to 1 will cause video annotations to be shown by default, whereas setting to 3 will cause video annotations to not be shown by default.
Here is a nice solution, just hide the div with annotations
$("div.video-annotations").css("display", "none");
I've been reading a lot of places that show how to set CKEditor into a read-only mode, but that is not what I need.
For iOS/Android (or better: "small/mobile devices"), I'd like to actually turn it off so that I have a plain old <textarea> on those devices/platforms (we don't usually need the fancy stuff; it's just nice to have on a desktop so people can copy/paste from MS Word and not have it blow up).
Is there a setting I can configure; or can I at least run some Javascript and programmatically turn it off?
See CKEDITOR.env.isCompatible flag. You can always change it a bit (see the definition).
Alternatively, wrap your CKEDITOR.replace() (or inline()) call in some sort of conditional.
I would like to check whether a browser is going to show a special "native" style dropdown (such as the iPhone and iPod) without checking specifically by browser name. Is it possible to check for that capability in a more generic way without looking at the user agent by name?
I'd like to do this to determine whether to render a standard or more enhanced dropdown control.
I don't believe this is actually possible without a really poor solution. I bet the best way to go is to just detect the device because pretty much all mobile browsers use a native ddl for displaying options.
This can be achieved by using Modernizr's media queries and touch detection:
if (Modernizr.touch && Modernizr.mq('only screen and (max-width: 768px)') {
//it is a mobile / tablet device
}
Or use regular CSS media queries.
I'm an 90% sure of this answer: No.
You are looking to detect if you are on a browser that looks weird but you are defining weird subjectively. User Reda's answer is correct, but it violates part of your question (not to identify browsers by name). My point is that you need to identify the browsers by name because you're qualifier is subjective, so you won't find a JS/CSS test for it.
Browsers have complete control over what dropdown they show. Most are inconsistent with their implementation of CSS on these dropdown components. There are no standards saying a browser needs to expose any information about the dropdown at the application level.
To affect what you want, you need to find the browsers whose dropdown controls you don't like and list them out, and target them via Modernizr or other such trickery. Unfortunately that violates your question's intent, so I think the answer to your actual question is... no, sorry.
I'm currently checking for the existence of window.orientation and it seems to do the job for android and ios.
You can check the appearance css property
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
and if it is not 'none' then your input has native styling.
You can find the possible values of appearance here:
https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-appearance and here http://trentwalton.com/2010/07/14/css-webkit-appearance/
As i read this question i got an idea for a dirty solution. Just a guess but maybe it helps:
Place your native element into the HTML and try get it in JavaScript with the elementFromPoint function. (MDN link)
If you get no element or the returned element is not your native one you know it is not displayed.
try something like this
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) {
$('#SOMEselectpicker').selectpicker('mobile');
}
I'm working on a website which was coded a while ago.
I've found a Javascript function that uses the following syntax to set a value for a text box
document.myForm.myText.value = "value";
I've tested this code and it works in IE, Firefox and Chrome.
My question is whether this way of setting/selecting DOM elements is ok going forward (ie. is it going to get depreciated)? Should I change instances of this type of element selecting to the more standard (in my experience) code below?
document.getElementById("myText").value = "value";
Thanks in advance.
I don't think it'll make a difference cause the browsers dom representation will have change to break the code; That'll probably break half the web pages on the internet.
Your code is better than the first because you will then be coding to the contract of the method getElementById, which returns the HTMLElement you need. This means that the JS Engine has to adhere to the standards of ECMAScript and return the exact element. Hence your code doesn't need to worry if tomorrow a browser changes it's structure and your element is now document.forms.myForm.myText.value instead of what you anticipated.
On one of my sites, I used liberally to provide better hyphenation in the web browser. Unfortunately, they get corrupted by copying or cutting and pasting, so when people copy from my website, the ar-tic-les ap-pear with ex-tra hy-phens which are really annoying. I exaggerated it a bit here, but you get the idea.
I'd love a way to filter the selection on copy - basically an opportunity to remove the 's before they get to the clipboard. I suspect this isn't possible, based on what I've read/researched, but thought I'd ask the collective wisdom here, in case I've missed something.
A pseudocode example of what would be beautiful:
element.oncopy = function (ev) {
ev.selection.replace(//g, '');
return true; // or ev, I suppose
}
Have a look at this article about the oncopy event. I think it is exactly what you need: http://help.dottoro.com/ljwexqxl.php.
Example #2 on the following page explains how to use the clipboard in a cross-browser friendly way (since only IE has access to the clipboardData object used in the first article): http://help.dottoro.com/ljxundda.php
That page also mentions that there are some cases where security restrictions may prevent the cross-browser method from working, which is why some sites use Flash to manipulate the clipboard. Here's an article which discusses that method, in case it sounds like what you want: http://www.jeffothy.com/weblog/clipboard-copy/
EDIT
Have a look at Hyphenator.js. It is a JavaScript method of hyphenating text intelligently on the client side. Quickly playing around with the demo (which can be found here), it appears to leave the hyphens out of copied text. It might be a pain to change your content to use this instead of , but it looks like it will achieve all of your goals.