By Piotr Hankiewicz
August 7, 2015
- You want to have redo button in your application, so when user will click on it, the latest changes will be discarded.
// after running just this, the latest user changes will be discarded (text input changes) execCommand('redo', false, null);
- You want to remove text after the cursor position.
// after running this script one character after the cursor // position in a current element will be removed execCommand('forwardDelete', false, null);
There are more than 30 functions (look here) that can be used with a limited amount of code. You need to be careful though, keep on testing, multiple browsers have different implementations, but will be unified in the future.
I want you to make a small experiment. On the current page please open developer console (Firebug or DevTools) and try to run this code:
document.designMode = 'on';
Have you noticed anything? What has happened now is that the whole page is editable now, you can edit any paragraph of this page, any header, any link. It’s not so practical anymore as you can’t run this command on any element, only on the Document object, but it’s cool to know that stuff like this exists. Every HTML element has a contentEditable attribute set now with a value set to true.
“contentEditable” attribute can be set to any HTML document element. What it does is it makes element editable or not. By default, every HTML element is not editable, you can easily change it by setting contentEditable attribute value to true like this:
document.getElementById('word-open').contentEditable = 'true';
If you will again run this script on the current page you will be able to edit big slogan on the left side of this text, well, only the “OPEN” word. This can be extremely useful when you need to build an online rich text editor.
Navigator object is not standardized yet by W3C but it’s supported by around 90% of the global browsers (known and popular browsers not supporting it are IE8 and Opera Mini). It contains multiple client browser information. For example:
// will return a list of supported/installed browser plugins, you can // check if the user has the Flash software installed, or to check if user uses Ad-block plugin console.log(navigator.plugins); // will return a geolocation object, you can track client geo position console.log(navigator.geolocation); // will return a browser engine name, useful when you need to check it instead // of a browser name console.log(navigator.engine);
I recommend everyone interested in the front-end development to go through W3C standardization documents, read it chapter by chapter. There are resources not widely popular but very helpful.