Voici quelques exemples de codes permettant d’interagir avec les champs de saisie de votre site internet.
Si vous ne connaissez pas jQuery, c’est un librairie complémentaire du langage Javascript permettant d’apporter des améliorations à celui-ci. Le Javascript est utilisé pour apporter des d’interactions avancées sur un site web.
Afficher un texte aléatoire dans un champs texte
Pratique pour animer le champ d’un moteur de recherche, ou pour donner quelques indications sur la façon de remplir un formulaire tout en ajoutant un peut d’animation.
$(function() {
var text = ['Je ne fais pas cela par vice', 'je le fais pour avoir du plaisir', 'Deviens ce que tu es.', 'Fais ce que toi seul peut faire.'];
var time = setInterval(function() {
var newText = text[Math.floor(Math.random()*text.length)];
$('#searchBox input#search-txt').attr('placeholder', newText);
},2500);
});
Retablir un texte par defaut dans nimporte quel champ
Ce code permet de définir par defaut le texte qui sera affiché dans le cas où le champ de saisie n’est pas renseigné.
$('input#searchInput').on('focus', function() {
if (!$(this).data('defaultText')) $(this).data('defaultText', $(this).val());
if ($(this).val()==$(this).data('defaultText')) $(this).val('');
});
$('input.input').on('blur', function() {
if ($(this).val()=='') $(this).val($(this).data('defaultText'));
});
Ainsi, au niveau de votre input vous aurez un HTML de ce genre :
<input id="searchInput" data-defaultText="Votre recherche">
Reconnaitre le Copier/coller avec jQuery
Voici un code permettant de détecter le couper/copier/coller en jQuery.
A chaque action de l’utilisateur vous pouvez déclancher un evenement de votre souhait.
Ici, un message est inseré dans une bulle d’info.
jQuery('textarea').bind({
copy : function(){
jQuery('div.info').text('Merci de ne pas utiliser de copier/coller');
},
paste : function(){
jQuery('div.info').text('Merci de ne pas utiliser de copier/coller');
},
cut : function(){
jQuery('div.info').text('Merci de ne pas utiliser de coouper/coller');
}
}); // textarea