:: Forum >> Version 1 >>

Textarea Edit Template

After doing a few changes to the Input-Template , I created a editable Textarea, but missed some css for Mozilla.

// ****************************************************************
// TEXTAREA Editable Cell Template.
// ****************************************************************

My.Templates.Textarea = Active.Templates.Text.subclass();

My.Templates.Textarea.create = function()
{
var obj = this.prototype;

// editor is not part of the template,
// there is only one single instance of editor object.
var editor = new Active.HTML.TEXTAREA;
editor.setClass("templates", "textarea");
editor.setAttribute("type", "text");
editor.setContent("text", function(){return template.getItemProperty("text")});

// template variable provides temporary reference
// to the parent template during edit mode.
var template;

function switchToEditMode(){
if (template) { switchToTextMode() }
template = this;
template.element().style.padding = 0;
template.element().innerHTML = editor;
editor.element().focus();
editor.setEvent("ondblclick", editor.element().focus());
}

obj.setEvent("ondblclick", switchToEditMode);

function switchToTextMode(){
var value = editor.element().value;
template.setItemProperty("text", value);
template.refresh();
template = null;
}

editor.setEvent("onblur", switchToTextMode);

};

My.Templates.Textarea.create();

******************************************
Plus CSS ....
******************************************
.active-templates-textarea {
width: 100%;
height: 100%;
padding: 0px 5px;
margin: -1px 0px;
border: 1px solid #666;
vertical-align: top;
font: menu;
line-height: 1.4em;
}

.active-templates-textarea.gecko {
display: block;
margin: 0px;
}


Carlos
Sunday, January 16, 2005
I know, there is a lot of considerations about using the
-Enter- key (CR Carriage Return)into a textarea,
even in my case (I plann to use it for a memo field) need to replace the
"/n" with chr(13)+chr(10) (in asp vbCr + vbLf), but others would need an html <br>
or something different, but as the normal database ussage is into a text-field, I try to disable
it with "onkeydown" event.keycode replacement.
(from now, the best char I found is the keycode=39 (arrow right)) I try -space- with no luck
If someone find a better "onkeydown" char-replacement approach, Please Post it !!!!

Just behind this line (at the bottom): (no matter after or before))
editor.setEvent("onblur", switchToTextMode);
Put this:
//disables the enter key
//editor.setEvent("onkeydown", function(){event.keyCode=39; });

Also found the way to make a NON Editable Template (just to see long cell-values)
Note: Is a new Template so, new Template name ---- Textareanoedit, and would need to increase the gird's rows height
and also disables any keypress into it, this time keyCode=37 (arrow left)
(so the only way to copy is by the IE-menu )
but could be replaced with a -Commented line- alert("NOT Editable") ;
Again: Anyone have a better approach ???

Here is the NON Editable Textarea code:
Thanks
Carlos


// ***********************************************
// TEXTAREANOEDIT Uneditable Cell Template.
// ***********************************************

My.Templates.Textareanoedit = Active.Templates.Text.subclass();

My.Templates.Textareanoedit.create = function()
{
var obj = this.prototype;

// editor is not part of the template,
// there is only one single instance of editor object.
var editor = new Active.HTML.TEXTAREA;
editor.setClass("templates", "textarea");
editor.setAttribute("type", "text");
editor.setContent("text", function(){return template.getItemProperty("text")});

// template variable provides temporary reference
// to the parent template during edit mode.
var template;

function switchToEditMode(){
if (template) { switchToTextMode() }
template = this;
template.element().style.padding = 0;
template.element().innerHTML = editor;
editor.element().focus();
editor.setEvent("onclick", editor.element().focus());
}

obj.setEvent("onfocus", switchToEditMode);

function switchToTextMode(){
template.refresh();
template = null;
}

//Disables any keypressed
editor.setEvent("onkeydown", function(){
//alert("NOT Editable");
event.keyCode=37;
});

editor.setEvent("onblur", switchToTextMode);
};

My.Templates.Textareanoedit.create();
Monday, January 17, 2005
Sorry
The code to be inserted into the Editable Textares that disables the -Enter- key should be:

//disables the enter key
editor.setEvent("onkeydown", function(event){if(event.keyCode==13){event.keyCode=39;}});

Thanks
Carlos
Monday, January 17, 2005



This topic is archived.

Back to support forum

Forum search