How can I get keyboard cursor(caret) position in javascript?

Report · Oct 24, 2013

Hi. I have a question.

I made a multilined edittext in ScriptUI.

But It's not working about Enter key.

All I want is when I push 'enter' key, begin a new line.

If I know how to get keyboard cursor position, I can insert '\n' character in middle of sentances.

/////////////////////////////////////////////////////////////////////////////////////

var win =new Window ("dialog", '');

win.orientation = "column";

var grpContents = win.add("group")

var codeInput = grpContents.add ("edittext", [0, 0, 150, 550], "", {multiline:true});

codeInput.alignment = ['fill', 'top']

codeInput.active = true;

codeInput.onEnterKey = function(){

codeInput.text = codeInput.text+"\n"

}

win.show()

/////////////////////////////////////////////////////////////////////////////////////

I use windowsXP and Illustrator CS3.

If you know about that, please help me!~

Report · Oct 24, 2013

All I want is when I push 'enter' key, begin a new line.

press Ctrl+Enter

Report · Oct 24, 2013

Thank you for your reply. I learn one thing because of you.

'Ctrl+Enter' is good and simple. But other person who use my script doesn't know about Ctrl+Enter.

Edittext object have 'onEnterKey' method. So I want to try make 'enter' key working.

If you know about that, please reply for me.

Thank you.

Report · Oct 25, 2013

'Ctrl+Enter' is good and simple. But other person who use my script doesn't know about Ctrl+Enter.

you may add a note (static text) or a tool tip in your user interface to let others know they need to use Ctrl+Enter

Edittext object have 'onEnterKey' method. So I want to try make 'enter' key working.

onEnterKey is an Event, not a method, and it fires up when you first activate or put the cursor in the edittext

Report · Oct 25, 2013

kimDino8 schrieb:
… 'Ctrl+Enter' is good and simple. But other person who use my script doesn't know about Ctrl+Enter …

Perhaps you try something like this:

var win =new Window ("dialog", '');
win.orientation = "column";
var lineBefore_btn = win.add ("button", undefined, "add new first Line");
var lineAfter_btn = win.add ("button", undefined, "add new last Line");
var grpContents = win.add("group");
var codeInput = grpContents.add ("edittext", [0, 0, 150, 550], "abc\rcdr", {multiline:true});
codeInput.alignment = ['fill', 'top'];
codeInput.active = true;
codeInput.helpTip = "You can also add a new line by clicking [Strg]+[Enter]";
lineBefore_btn.onClick = function () {
    codeInput.text = "\r" + codeInput.text;
    codeInput.active = true;
    }
lineAfter_btn.onClick = function () {
    codeInput.text = codeInput.text + "\r";
    codeInput.active = true;
    }
win.show();

Report · May 18, 2015

Hi guys,

I know it's 2 years later so you've probably moved on but figured I'd drop a little breadcrumb here for anyone who comes across this issue. If you're using a multi-line EditText, you can set the "wantReturn" property = true (defined within the "properties" hash same as multiline) and whenever the EditText has focus and you hit Enter, it inserts a carriage return at the cursor.

var codeInput = grpContents.add ("edittext", [0, 0, 150, 550], "abc\rcdr", {multiline:true, wantReturn: true});

The other option is to put an event listener on the EditText that checks the key pressed and if it's the Enter key...you can set the EditText.textselection = "\n" and it will automatically insert a carriage return wherever the cursor is.

var captureEnter = function(e) {
                try {
                    //check e.keyName or e.keyIdentifier for Enter key
                    //you'll need to play around to figure out what it is
                    if(isEnter) {
                         codeInput.textselection = "\n";
                    }
                } catch(err) { //error handling }
            }
        
codeInput.addEventListener("keydown", captureEnter);

Hope that helps!

Report · May 18, 2015

never too late, wantReturn works great, where did you find it?

thanks for sharing

Report · May 19, 2015

It was an addition to the ScriptUI functionality in CS6...although I only saw it reported as part of the After Effects upgrade.

scripting changes in After Effects CS6, plus new scripting guide | After Effects region of interest

Report · May 19, 2015

great, thanks cswaim

Report · May 19, 2015

No problem! I also see it's mentioned in Peter Kahrel's guide on ScriptUI for InDesign (although it's relevant across all the Adobe scripting environments). It's a pretty comprehensive guide that has been keeping relatively up-to-date with all the new releases.

ScriptUI for dummies | Peter Kahrel

Report · May 21, 2015

A little off topic, but I could not help myself.

I more way to do a Caret with Javascript

var blk = new GrayColor();blk.gray = 100;
var gr = new CMYKColor();gr.cyan = 67;gr.magenta = 0;gr.yellow = 100;gr.black = 0;
var oj = new CMYKColor();oj.cyan = 15;oj.magenta = 55;oj.yellow = 100;oj.black = 3;
var C = app.activeDocument.groupItems.add();
var B = C.pathItems.add();B.stroked = true;B.strokeWidth = 1;B.strokeColor = blk;B.filled = true;B.fillColor = oj;
    P(B,221,358,254,376,285,392);P(B,285,403,264,442,248,471);P(B,153,590,142,587,130,583);P(B,182,428,191,410,213,368);
B.closed = true;
var L1 = C.pathItems.add();L1.stroked = true;L1.strokeWidth = 1;L1.strokeColor = blk;L1.filled = false;L1.strokeCap = StrokeCap.ROUNDENDCAP;
    P(L1,205,385,205,385,203,399);P(L1,222,410,229,413,229,413);
var L2 = C.pathItems.add();L2.stroked = true;L2.strokeWidth = 1;L2.strokeColor = blk;L2.filled = false;L2.strokeCap = StrokeCap.ROUNDENDCAP;
    P(L2,259,450,259,450,252,454);P(L2,232,454,219,443,219,443);
var L3 = C.pathItems.add();L3.stroked = true;L3.strokeWidth = 1;L3.strokeColor = blk;L3.filled = false;L3.strokeCap = StrokeCap.ROUNDENDCAP;
    P(L3,244,471,244,471,236,475);P(L3,224,473,216,470,216,470);
var L4 = C.pathItems.add();L4.stroked = true;L4.strokeWidth = 1;L4.strokeColor = blk;L4.filled = false;L4.strokeCap = StrokeCap.ROUNDENDCAP;
    P(L4,227,493,227,493,221,499);P(L4,210,496,207,495,207,495);
var L5 = C.pathItems.add();L5.stroked = true;L5.strokeWidth = 1;L5.strokeColor = blk;L5.filled = false;L5.strokeCap = StrokeCap.ROUNDENDCAP;
    P(L5,181,550,181,550,174,555);P(L5,167,552,163,549,163,549);
var L6 = C.pathItems.add();L6.stroked = true;L6.strokeWidth = 1;L6.strokeColor = blk;L6.filled = false;L6.strokeCap = StrokeCap.ROUNDENDCAP;
    P(L6,158,507,158,507,156,519);P(L6,165,526,171,529,171,529);
var L7 = C.pathItems.add();L7.stroked = true;L7.strokeWidth = 1;L7.strokeColor = blk;L7.filled = false;L7.strokeCap = StrokeCap.ROUNDENDCAP;
    P(L7,176,449,176,449,176,462);P(L7,186,472,193,475,193,475);
var S1 = C.pathItems.add();S1.stroked = true;S1.strokeWidth = 1;S1.strokeColor = blk;S1.filled = true;S1.fillColor = gr;
    P(S1,255,384,255,384,263,370);P(S1,298,319,326,311,326,311);P(S1,326,304,326,304,309,309);P(S1,285,327,251,382,251,382);
var S2 = C.pathItems.add();S2.stroked = true;S2.strokeWidth = 1;S2.strokeColor = blk;S2.filled = true;S2.fillColor = gr;
    P(S2,250,381,250,381,258,366);P(S2,296,307,326,296,326,296);P(S2,326,288,326,288,310,295);P(S2,285,314,246,377,246,377);
var S3 = C.pathItems.add();S3.stroked = true;S3.strokeWidth = 1;S3.strokeColor = blk;S3.filled = true;S3.fillColor = gr;P(S3,253,383,253,383,291,332);
    P(S3,306,296,309,275,309,275);P(S3,303,274,303,274,299,308);P(S3,259,368,249,380,249,380);
var S4 = C.pathItems.add();S4.stroked = true;S4.strokeWidth = 1;S4.strokeColor = blk;S4.filled = true;S4.fillColor = gr;
    P(S4,255,384,255,384,287,318);P(S4,286,288,279,273,279,273);P(S4,270,273,270,273,290,295);P(S4,259,365,251,382,251,382);
var S5 = C.pathItems.add();S5.stroked = true;S5.strokeWidth = 1;S5.strokeColor = blk;S5.filled = true;S5.fillColor = gr;
    P(S5,260.7,385.7,260.7,385.7,292,322);P(S5,297,291,295,273,295,273);P(S5,287,273,287,283,296,302);P(S5,264,369,256.3,384.4,256.3,384.4);
var L8 = C.pathItems.add();L8.stroked = true;L8.strokeWidth = 1;L8.strokeColor = blk;L8.filled = false;L8.strokeCap = StrokeCap.ROUNDENDCAP;
    P(L8,245,376,245,376,250.4,383);P(L8,255.2,385.1,263,386,263,386);
var T = C.pathItems.add();T.stroked = true;T.strokeWidth = 1;T.strokeColor = blk;T.filled = true;T.fillColor = gr;
    P(T,401,243,392,245,399,237);P(T,389,236,387,237,396,234);P(T,394,228,386,230,391,225);P(T,389,217,376,218,384,218);P(T,384,209,375,212,380,206);
    P(T,375,200,367,203,370,200);P(T,363,191,359,197,361,192);P(T,352,189,352,197,349,189);P(T,344,191,345,197,343,195);P(T,336,190,336,196,334,192);
    P(T,328,192,327,196,324,191);P(T,317,186,314,193,315,188);P(T,305,190,306,197,304,191);P(T,296,193,298,198,295,192);P(T,288,192,291,201,285,195);
    P(T,281,203,283,207,279,202);P(T,267,208,274,215,266,208);P(T,262,223,269,222,256,223);P(T,258,234,262,234,254,236);P(T,256,248,264,247,255,249);
    P(T,253,261,264,260,260,264);P(T,263,276,269,271,266,274);P(T,271,282,278,277,276,279);P(T,277,282,279,284,283,286);P(T,287,284,290,282,289,288);
    P(T,298,295,301,287,301,291);P(T,302,294,304,297,307,299);P(T,310,296,312,295,307,300);P(T,314,309,320,306,320,311);P(T,321,315,327,312,324,317);
    P(T,331,318,333,316,335,322);P(T,340,326,343,319,346,323);P(T,353,321,349,315,354,319);P(T,359,312,356,308,364,311);P(T,364,306,364,302,368,309);
    P(T,379,305,378,297,382,300);P(T,386,297,384,294,389,296);P(T,390,293,387,288,393,292);P(T,404,286,396,277,404,281);P(T,411,269,402,269,408,269);
    P(T,411,264,405,263,410,259);P(T,406,255,401,256,405,254);P(T,403,248,399,252,400,246);
T.closed = true;T.strokeJoin = StrokeJoin.ROUNDENDJOIN;
function P(B,Lx,Ly,x,y,Rx,Ry){
    var p = B.pathPoints.add();
    p.anchor = Array(x,-y);
    p.leftDirection = Array(Lx,-Ly);
    p.rightDirection = Array(Rx,-Ry);
}

oops, wrong Caret...

Report · May 21, 2015

good one

How can I get keyboard cursor(caret) position in javascript?

Explore related tutorials & articles