How to get selected text from textarea/text input in Ext JS

Standard

Hi Guys!

Here I am going to explain about getting selected text string from a EXTJS/HTML textarea/textinput.

We need to write two different code for IE based browsers and rest of all.

In ExtJS first we need to select dom element of textarea and that can be done using inputEl.dom.

var inputTextArea = Ext.ComponentQuery.query('main textarea')[0];
var input = inputTextArea.inputEl.dom;

It basically gives us the textarea instanse as we can get by writting

var input = document.getElementById('idname');

But generally we dont give components a id and EXTJS framework automattically assign a unique id to each and  every component by itself. So we have to do it by using inputEl.dom way.

next step is to check if document.selection && document.selection.createRange are not undefined. if they are not undefined then we are working for IE based browsers. and vise versa.

Ok! so if we have document.selection then we can get our selected text by

input.selection = document.selection.createRange();
selectedText = input.selection.text;

Let me explain what the above code exactly do.
first we get document.selection.createRange(). createRange() method creates a TextRange object from the current text selection. You can study more about createRange from microsoft website.

In second step, we simply got the selection text and assigned it into a variable.

On the other hand if we are working with a non IE browser then the way is little different and can be achieved by

selectedText = input.value.substring(input.selectionStart, input.selectionEnd);

Here input.selectionStart and input.selectionEnd return the selection start index/selection end index from the selected string and by this way we can easily get substring by putting these parameters into the substring method of input string.

The running example can be found on http://textselection.herokuapp.com/

The complete code for this example is as below

Ext.define("TextSelection.view.Main", {
    extend: 'Ext.Panel',
    requires:['Ext.form.field.TextArea','Ext.resizer.Splitter'],
    alias:'widget.main',
    title:'How to get Text Selection from a text input',
    layout:'vbox',
    initComponent:function(){
    	this.items = [
	    	{
	    		xtype:'textarea',
	    		width:'100%',
	    		emptyText:'Enter some text here, select some part of it and click on \'Get selected Text\' button at the bottom ',
	    		flex:1
	    	},
	    	{
	    		xtype:'splitter'
	    	},
	    	{
	    		xtype:'panel',
	    		border:0,
	    		flex:.5,
	    		width:'100%',
	    		layout:'fit',
	    		title:'Your text selection',
	    		fbar: [
	    			{
	    				type:'label',
	    				html:'<a href="http://www.twitter.com/goyalshubham13" target="_blank">@goyalshubham</a>',
	    				ui:'plain'
	    			},
					{
						xtype: 'button',
						text: 'Get selected text',
						listeners:{
							click:this.getSelectedText
						}
					}
				],
				items:[
					{
			    		xtype:'textarea',
			    		width:'100%',
			    		flex:1,
			    		readOnly:true,
			    		value:'Your selected text',
			    	}
				]
	    	}
	    ]
	    this.callParent(arguments);
    },
    getSelectedText:function(button, event){
    	var resultTextArea = Ext.ComponentQuery.query('main panel textarea')[0];
    	var inputTextArea = Ext.ComponentQuery.query('main textarea')[0];
    	var selectedText;
    	var input = inputTextArea.inputEl.dom;
		if (document.selection && document.selection.createRange) {
			input.selection = document.selection.createRange();
			selectedText = input.selection.text;
		} else if (typeof input.selectionStart === 'number') {
			selectedText = input.value.substring(input.selectionStart, input.selectionEnd);
		}
		inputTextArea.focus();
		resultTextArea.setValue(selectedText);
    }
});

One thought on “How to get selected text from textarea/text input in Ext JS

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s