KOMPOOS.NL

selecteer tekst

home » javascripts » text-effects » selekteer-tekst.html

sitemap


uitleg select-procedure

Om de tekst-select in werking te zien lijkt het mij het slimst om wat tekst op deze pagina te selecteren of een select all te doen. Om op een pagina de select-kleuren (en achtergrond) te wijzigen moet je het onderstaande javascript zo laag als mogelijk in de body-sectie plaatsen en de body-start-tag wijzigen in: <body onmouseup="selekteer();">. Bovenin het script staan de variabelen tekst_kleur en achtergrond_kleur. Voer hier de kleur(en) in die je wilt gebruiken. Op de kompoos.nl is een tabel met de beschikbare kleuren aanwezig.

javascript tekst-select procedure


<script>
var geef_de_links_vrij = 0;
var tekst_kleur = "white";
var achtergrond_kleur = "indigo";
var de_css_code = "::-moz-selection{background:" + achtergrond_kleur + ";color:" + tekst_kleur + "}::selection{background:" + achtergrond_kleur + ";color:" + tekst_kleur + "}",
stijl_element = document.createElement("style"),
geselecteerd;
stijl_element.type = "text/css";
if (stijl_element.styleSheet) {
    stijl_element.styleSheet.cssText = de_css_code;
} else {
    stijl_element.appendChild(document.createTextNode(de_css_code));
}
document.getElementsByTagName("head")[0].appendChild(stijl_element);
function selekteer() {
    if (document.selection) {
        geselecteerd = document.selection.createRange();
        if (geselecteerd.text !== "") {
            geef_de_links_vrij = 1;
            document.execCommand("ForeColor", false, tekst_kleur);
            document.execCommand("BackColor", false, achtergrond_kleur);
            this.document.execCommand("UnSelect", true);
        } else {
            if (geef_de_links_vrij == 1) {
                geef_de_links_vrij = 0;
                document.execCommand("Refresh", "false", "false");
            }
        }
    }
}
</script>
Gebruik voor alle voorbeelden op de http://kompoos.nl een valide html5 pagina.