JavaScript

Logo JavaScript

Tous mes trucs et astuces pour utiliser JavaScript

Mettre automatiquement le focus dans un champ de formulaire

<script type="text/javascript">

    function PMA_focusInput(){
        var objet = document.getElementById('id_element_formulaire');
        objet.focus();
    }
    window.setTimeout('PMA_focusInput()', 500);
</script>

Ajouter un commentaire

Etiquettes:

JavaScript

Modifier automatiquement la valeur du paramètre maxlength d'un ou plusieurs éléments textarea

Voici une petite fonction javascript qui permet de modifier la valeur du paramètre "maxlength" d'un élément "textarea".

Dans l'exemple suivant, la fonction modifie la valeur du paramètre "maxlength" à illimité (-1) uniquement si la valeur est inférieur à 1000 caractères.

function updMaxLthTxt () {
    var txts = document.getElementsByTagName('textarea');
    for(var i = 0, l = txts.length; i < l; i++) {
        var len = parseInt(txts[i].getAttribute("maxlength"), 10);
        if(len < 1000) {
            txts[i].setAttribute("maxlength", -1);
        }
    }
}

Pour exécuter cette fonction automatiquement après le chargement de la page html:

<html>
<head>
</head>
<body onload = "updMaxLthTxt();">
.....
</body>
</html>

Modifier le CSS avec JavaScript

Ajouter une classe à une balise en fonction de son contenu :

Ce script javascript parcourt toutes les balises  de la page web et si le contenu de chaque balise commence par "$ ", une balise  est automatiquement ajoutée avec une classe "code"

<script language=javascript type="text/javascript">
function addCode()
{
var parag = document.getElementsByTagName('p');
var myRegex = /^\$ /;
for (var i=0, c=parag.length; i<c; i++)
{
if(myRegex.test(parag[i].innerHTML))
{
parag[i].innerHTML = '<span class="code">'+(parag[i].innerHTML)+'</span>';
}
}
}
</script>

Pour activer la fonction javascript il suffit simplement de rajouter onload = "addCode();" dans la balise <body> de chaque page web.

<html>
<head>
</head>
<body onload = "addCode();">
.....
</body>
</html>

javascript: mettre en surbrillance des mots dans un contenu html

Avec l'arrivée du HTML5, de nouvelles balises ont fait leur apparition.

Pour la mise en surbrillance de mots/textes dans un contenu html, il existe dorénavant la balise 

Voici une fonction javascript (jquery) qui permet de modifier le contenu html afin d'y insérer ces fameuses balises 

        function searchKeyword(keyword){
            var content = $("#content").html();
            var re = new RegExp(keyword, "gi");
            var new_content = content.replace(re, "<mark>" + keyword + "</mark>");
            $("#content").html(new_content);
        }

Cette fonction prend en paramètre le mot clé à mettre en surbrillance.
Une nouvelle expression Regex est créée avec le mot clé et les paramètres "g" pour une recherche globale, et "i" pour une recherche ignorant la casse.
La méthode "replace" utilise la regex afin d'y insérer la nouvelle balise 

Exécution de la fonction avec un mot clé ou une liste de mots clé

        $( document ).ready(function() {
            // avec un mot clé
            searchKeyword("foo");
            // avec une liste de mots clé
            var keywords = "foo bar baz qux quux corge grault".split(" ");
            keywords.forEach(searchKeyword);
        });

Etiquettes: