Please give a example for textarea focus problem

[devsimParticipant]

Hello.

Can I get a example for this issue.

https://www.jqwidgets.com/community/topic/enter-focus-problem-textarea-in-jqxgrid/

Sir. Peter Stoev answer to me ‘You can use the editorElement.focus() to put the focus to the first character in the editor’

It’s too much hard too me plase give a example for me~~~ please… 🙁

[Peter StoevKeymaster]

Hi devsim,

The example is available here: http://jsfiddle.net/jqwidgets/t25k2Lch/

Best Regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com

[devsimParticipant]

Thank you for example. Sir. Peter Stoev.

But here’s my real question !

—————————
$(“#grid”).jqxGrid(
{
width: getWidth(‘Grid’),
source: dataAdapter,
editable: true,
columnsresize: true,
handlekeyboardnavigation: function (event)
{
var key = event.charCode ? event.charCode : event.keyCode ? event.keyCode : 0;
if (key == 13) {
currentContent = editorElement.val() + ‘\n’;
editorElement.val(currentContent);
return true;
} else if (key == 27) {
return true;
}
},
columns: [
{
text: ‘First Name’,
columntype: ‘template’,
datafield: ‘firstname’,
width: 120,
createeditor: function(row, cellvalue, editor, celltext, cellwidth, cellheight) {
editorElement = $(‘<textarea id=”customTextArea’ + row + ‘”></textarea>’).prependTo(editor);
editorElement.jqxTextArea({
height: 88,
width: ‘100%’
});
},
initeditor: function (row, cellvalue, editor, celltext, pressedChar)
{
currentContent = ”;
editorElement.val(currentContent);
},
geteditorvalue: function(row, cellvalue, editor) {
return editor.find(‘textarea’).val();
}
},
{ text: ‘Contact Name’, datafield: ‘ContactName’, width: 150 },
{ text: ‘Contact Title’, datafield: ‘ContactTitle’, width: 180 },
{ text: ‘City’, datafield: ‘City’, width: 120 },
{ text: ‘Postal Code’, datafield: ‘PostalCode’, width: 90 },
{ text: ‘Country’, datafield: ‘Country’, width: 100 }
]
————————————–

upper example is
when I located a and b the cursor

1.
============
ab
============

and I press Enter Key.

2.
============
ab
============

3.
============
ab
_ <— cursur
============

I want like this

4.
============
a
b <—– cursur
============

it is very hard to make source to me…

please help me.. 🙁

[Peter StoevKeymaster]

Hi devsim,

In the initeditor call the focus method in order to focus the textarea when it becomes visible.

Best Regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com

[devsimParticipant]

After 11 months later

I solved the problem.

This is My solution

—

var editorElement = null;
var currentContent = ”;

$(“#devsimGrid”).jqxGrid({
…

handlekeyboardnavigation: function (event) {
var key = event.charCode ? event.charCode : event.keyCode ? event.keyCode : 0;

if (key == 13) {
var txtArea = editorElement[0];
var txtValue = txtArea.value;
var selectPos = txtArea.selectionStart;
var beforeTxt = txtValue.substring(0, selectPos);
var afterTxt = txtValue.substring(txtArea.selectionEnd, txtValue.length);

currentContent = beforeTxt + “\n” + afterTxt;
editorElement.val(currentContent);

var pos = (selectPos+1);
var obj = document.getElementById(“customTextArea0TextArea”);
if (obj.setSelectionRange) {
obj.focus();
obj.setSelectionRange(pos, pos);
}
else if (obj.createTextRange) {
var c = obj.crateTextRange();
c.move(“character”, pos);
c.select();
}

return true;
} else if (key == 27) {
return true;
}
},

…

}, {
text: ‘Work’,
editable: true,
datafield: ‘Work’,
width: ‘380px’,
align: ‘center’,
cellsrenderer: textrenderer,
columntype: ‘template’,
createeditor: function(row, cellvalue, editor, celltext, cellwidth, cellheight) {
editorElement = $(‘<textarea id=”customTextArea’ + row + ‘”></textarea>’).prependTo(editor);
editorElement.jqxTextArea({
height: 88,
width: ‘100%’
});
},
initeditor: function (row, cellvalue, editor, celltext, pressedChar) {
currentContent = ”;
editorElement.val(cellvalue);
},
geteditorvalue: function (row, cellvalue, editor) {
return editor.find(‘textarea’).val();
}

…

—

Hey Peter

I think you have to love your job….

[Author]

Posts