Textarea auto dimensionnée


Textarea auto dimensionnée

Cette classe va vous permettre d’obtenir une textarea auto dimensionnée pour laquelle vous pouvez définir un nombre de ligne maximum avant d’obtenir une scrollbar.
En clair, votre textarea vas cessez de s’agrandir lorsque le nombre de ligne que vous avez choisi sera atteint.

Pour l’utiliser :

  • Créez un répertoire « ext » au même niveau que celui de dojo
  • Dans ce nouveau répertoire, créez un répertoire « widget »
  • Puis dans ce dernier, créez un fichier TextArea.js et placez-y le code suivant :
  • Toujours dans ce répertoire, créez un répertoire « templates »
  • Dans celui-ci, créez un fichier TextArea.html et collez y le contenu ci-apres (section « code html »)

code javascript

<script type="text/javascript">// <![CDATA[
 
 
dojo.provide("ext.widget.TextArea");
 
dojo.require("dijit._Templated");
dojo.require("dijit._Widget");
 
dojo.declare("ext.widget.TextArea", [dijit._Widget,dijit._Templated], {
 
	templatePath: dojo.moduleUrl("ext.widget", "templates/TextArea.html"),
 
	cols:50,
 
	_rows:1,
 
	rowHeight:15,
 
	maxLineNumber:3,
 
	minLineNumber:1,
 
	tabindex:"",
 
	postCreate: function(){
		//console.log("ext.widget.TextArea::postCreate");
		this._rows = this.minLineNumber;
		this.domNode.cols=this.cols;
		this.domNode.rows=this._rows;
		this.domNode.name=this.id;
		if (this._rows == 1) dojo.style(this.domNode,"height",this.rowHeight+"px");
 
		this.connect(this.domNode, "focus", this._focused);
		this.connect(this.domNode, "blur", this._blurred);
	},
 
	getValue : function() {
		return this.domNode.value;
	},
 
	setValue : function(value) {
		this.domNode.value=value;
		this.resizeArea();
	},
 
	getRows : function() {
		return this._rows;
	},
 
	_setRows : function(value, size) {
		this._rows=value;
		this.domNode.rows=value;
		if (size != "")
			dojo.style(this.domNode,"height",size);
	},
 
	_onKeyUp: function() {
		//console.log("ext.widget.TextArea::_onKeyUp");
		this.resizeArea();
	},
 
	resizeArea:function() {
 
		var rows = this.getValue().split('
');
		var nRows=0;
		for (i=0;i < rows.length; i++) {
			if (rows[i].length >= this.cols) 
				nRows+= Math.floor(rows[i].length/this.cols);
		}
		nRows += rows.length;
 
		// check the minimun size
		if (nRows
<this.minLineNumber &#038;& this.minLineNumber>1){
			nRows=this.minLineNumber;
		}
		if (nRows <= 1){
			this._setRows(1,this.rowHeight+"px");
		}else{
			this._setRows(Math.min(this.maxLineNumber, nRows),"auto");
		}
	},
 
	_focused: function(e){
		dojo.addClass(this.domNode, "dijitTextAreaFocused");
	},
 
	_blurred: function(e){
		dojo.removeClass(this.domNode, "dijitTextAreaFocused");
	}
 
});
 
// ]]></script>
A propos

Technophile passionné par le web, Je travaille actuellement en tant qu'Expert Dojo auprès de la banque ING aux Pays Bas. http://www.linkedin.com/in/santalucia

Publié dans code Tagués avec :

Laisser un commentaire