Javascript – Change textbox to textarea on click

extjsjavascripttextareauser interface

How do I convert a simple text box to text area when the user clicks on it. I'm using EXT JS.

Best Answer

Are you doing it just for visual appearance? Or is there a valid reason for converting it from input to textarea?

If you are doing it just for the visuals of it you can get a long way with just setting the height of your textarea and in the focus event increase the height.

Ext.onReady(function(){

    new Ext.form.TextArea({
        renderTo: Ext.getBody(),
        name: 'myTextArea',
        width: 200,
        height: 22,
        listeners: {
            focus: function(textarea){
                textarea.setHeight(200);
            },
            blur: function(textarea){
                textarea.setHeight(22);
            }
        }
    });

});

EDIT: These stopped working:

~~Try it here: http://jsfiddle.net/chrisramakers/9FjGv/2/~~

You can even quite easily animate it for some extra fancy visualy fancy pancy.
http://jsfiddle.net/chrisramakers/9FjGv/3/

Related Solutions

Javascript – How to create a GUID / UUID

[Edited 2021-10-16 to reflect latest best-practices for producing RFC4122-complaint UUIDs]

Most readers here will want to use the uuid module. It is well-tested and supported.

The crypto.randomUUID() function is an emerging standard that is supported in Node.js and an increasing number of browsers.

If neither of those work for you, there is this method (based on the original answer to this question):

function uuidv4() {
  return ([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g, c =>
    (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
  );
}

console.log(uuidv4());

Note: The use of any UUID generator that relies on Math.random() is strongly discouraged (including snippets featured in previous versions of this answer) for reasons best-explained here. TL;DR: Math.random()-based solutions do not provide good uniqueness guarantees.

Javascript – How to detect a click outside an element

Note: Using stopPropagation is something that should be avoided as it breaks normal event flow in the DOM. See this CSS Tricks article for more information. Consider using this method instead.

Attach a click event to the document body which closes the window. Attach a separate click event to the container which stops propagation to the document body.

$(window).click(function() {
  //Hide the menus if visible
});

$('#menucontainer').click(function(event){
  event.stopPropagation();
});

Best Answer

Related Solutions

Javascript – How to create a GUID / UUID

Javascript – How to detect a click outside an element

Related Topic