Le script suivant est à coller dans extensions.js :

Ajax.InPlaceDateEditor = Class.create();
Object.extend(Ajax.InPlaceDateEditor.prototype, Ajax.InPlaceEditor.prototype);
Object.extend(Ajax.InPlaceDateEditor.prototype, {
	initialize: function(element, url, options) {
    this.url = url;

	if($(element).firstChild)
	{
		var monSplit=$(element).innerHTML.split("-");
		if(monSplit[0]>1000)
			$(element).firstChild.replaceData(0,$(element).firstChild.nodeValue.length,monSplit[2]+'-'+monSplit[1]+'-'+monSplit[0]);
    }
	this.element = element = $(element);

    this.prepareOptions();
    this._controls = { };
    //arguments.callee.dealWithDeprecatedOptions(options); // DEPRECATION LAYER!!! //ET ALORS ? J'men fous !!!
    Object.extend(this.options, options || { });
    if (!this.options.formId && this.element.id) {
      this.options.formId = this.element.id + '-inplaceeditor';
      if ($(this.options.formId))
        this.options.formId = '';
    }
    if (this.options.externalControl)
      this.options.externalControl = $(this.options.externalControl);
    if (!this.options.externalControl)
      this.options.externalControlOnly = false;
    this._originalBackground = this.element.getStyle('background-color') || 'transparent';
    this.element.title = this.options.clickToEditText;
    this._boundCancelHandler = this.handleFormCancellation.bind(this);
    this._boundComplete = (this.options.onComplete || Prototype.emptyFunction).bind(this);
    this._boundFailureHandler = this.handleAJAXFailure.bind(this);
    this._boundSubmitHandler = this.handleFormSubmission.bind(this);
    this._boundWrapperHandler = this.wrapUp.bind(this);
    this.registerListeners();
  },
  createEditField: function() {
    var text = (this.options.loadTextURL ? this.options.loadingText : this.getText());
    var fld;
	fld = document.createElement('input');
	fld.type = 'text';
	fld.id=this.element.id;
	var size = this.options.size || this.options.cols || 0;
	if (0 < size) fld.size = size;

    fld.name = this.options.paramName;
    fld.value = text; // No HTML breaks conversion anymore
    fld.className = 'editor_field';
    if (this.options.submitOnBlur)
      fld.onblur = this._boundSubmitHandler;
	fld.onClick=window.open('./calendrier/pop.calendrier.php?frm='+this.options.formId+'&ch='+fld.id,'calendrier','width=400,height=200,scrollbars=0').focus();

    this._controls.editor = fld;
    if (this.options.loadTextURL)
      this.loadExternalText();
    this._form.appendChild(this._controls.editor);
  }
});

Voici quelques infos concernant son utilisation :

Ce code nécessite ce Calendrier à placer à la racine de votre projet, dont je ne trouve plus le site de l’auteur … (il faut mettre au moins une URL dans les commentaires)

Pour « préparer » le champ de saisie, il faut créer un span définit comme ceci dans votre page :

mon Texte

• monId : L’ID sera envoyé à votre page de traitement lors de la validation du mini formulaire
• mon texte : sera envoyé sous le nom « value »

De plus, il faut maintenant « préparer » votre span pour le rendre éditable, en collant ceci la même page :

$('monId').(function(el){
                        var nom = el.id;
                        new Ajax.InPlaceEditor(el, './mesActions.php',
                           { callback: function(form, value) {
                            return 'champ='+nom+'&value=' + encodeURIComponent(value);
                            }
                           });
                    });

• mesActions.php étant la page qui traitera les informations

• Champ est ici le nom d’un champ dans ma base de données.
• Value est la valeur saisie dans la case de texte qui apparait.

La méthode d’envoi est du POST.

Maintenant, passons à la partie traitement de cette info, avec le fichier mesActions.php :

J’avoue que ce code n’est pas très utile, mais il peut vous servir de base de travail pour la suite…

En espérant que ce code vous sera utile (ou pas)…

Pour les questions/précisions, n’hésitez pas à abuser des commentaires

var raccourci; //genre de flag pour dire si le raccourci est prêt ou pas
var mesURL=new Array(); //mes URLS
mesURL["F"]="http://www.google.fr"; //raccourci "F"
mesURL["I"]="http://www.google.com"; //raccourci "I"
mesURL["D"]="http://www.google.de"; //raccourci "D"

function onRaccourciClavier(e)
{
  if(e.element().tagName !="INPUT" && e.element().tagName !="SELECT") //check si on est pas dans un input ou selectbox
  {
    if(String.fromCharCode(e.keyCode)=="G" && raccourci!="G") raccourci="G";
    else
    {
      var monURL = mesURL[String.fromCharCode(e.keyCode)];
      if(raccourci=="G" && monURL) window.location=monURL;
      raccourci="";
    }
  }
}

Event.observe(window,'keyup', onRaccourciClavier);

Ce snippet fonctionne comme les raccourcis « menu » de Google Reader. C’est à dire qu’il réagit à une suite de 2 touches, dont la première est le G.
Par exemple, la combinaison GF ouvrira Google en Français….

Ce code prends également en compte le fait qu’un champ de saisie de texte soit sélectionné ou pas.

Code préparé en quelques minutes sur une idée de Pickupjojo