javascript - Get the offset position of the caret in a textarea in pixels -

-

this question has answer here:

in project i'm trying offset position of caret in textarea in pixels. can done?

before asking here, have gone through many links, tim down's, couldn't find solution works in ie8+, chrome , firefox. seems tim down working on this.

some other links have found have many issues not finding top offset of caret position.

i trying offset position of caret because want show auto-complete suggestion box inside textarea positioning based on offset position of caret.

ps: can't use contenteditable div because have written lots of code related textarea.

here's approach using rangyinputs, rangy , jquery.

it copies whole text inside textarea div of same size. have set css ensure in every browser, textarea , div wrap content in same way.

when textarea clicked, read out @ character index caret positioned, insert caret span @ same index inside div. doing ended having issue caret span jumping previous line if user clicked @ start of line. fix check if previous character space (which allow wrap occur), if true, wrap in span, , wrap next word (the 1 directly after caret position) in span. compare top values between these 2 span's, if differ, there wrapping going on, assume top , left value of #nextword span equivalent caret position.

this approach can still improved upon, i'm sure haven't thought of possibly go wrong, , if have, haven't bothered implementing fix of them don't have time @ moment, number of things need at:

  • it doesn't yet handle hard returns inserted enter (fixed)
  • positioning breaks when entering multiple spaces in row (fixed)
  • i think hyphens allow content wrap occur well..

currently works same way across browsers here on windows 8 latest versions of chrome, firefox, ie , safari. testing has not been rigorous though.

here's jsfiddle.

i hope you, @ least might give ideas build on.

some features:

  • i have included ul positioned in right spot, , fixed firefox issue textarea selection not re-set original spot after dom manipulations.

  • i have added ie7 - ie9 support , fixed multiple word selection issue pointed out in comments.

  • i have added support hard returns inserted enter , multiple spaces in row.

  • i have fixed issue default behaviour ctrl+shift+left arrow text selection method.

javascript

function gettextareaxandy() {      // don't if key pressed left arrow     if (e.which == 37) return;           // save selection start     var selection = $(this).getselection();     var index = selection.start;      // copy text div     $(this).blur();     $("div").text($(this).val());      // current character     $(this).setselection(index, index + 1);     currentcharacter = $(this).getselection().text;      // previous character     $(this).setselection(index - 1, index)     previouscharacter = $(this).getselection().text;      var start, endchar;     var end = 0;     var range = rangy.createrange();      // if current or previous character space or line break, find next word , wrap in span     var linebreak = previouscharacter.match(/(\r\n|\n|\r)/gm) == undefined ? false : true;      if (previouscharacter == ' ' || currentcharacter == ' ' || linebreak) {         = index + 1; // start @ end of current space                 while (endchar != ' ' && end < $(this).val().length) {             i++;             $(this).setselection(i, + 1)             var sel = $(this).getselection();             endchar = sel.text;             end = sel.start;         }          range.setstart($("div")[0].childnodes[0], index);         range.setend($("div")[0].childnodes[0], end);         var nextword = range.tohtml();         range.deletecontents();         var position = $("<span id='nextword'>" + nextword + "</span>")[0];         range.insertnode(position);         var nextwordtop = $("#nextword").position().top;     }      // insert `#caret` @ position of caret     range.setstart($("div")[0].childnodes[0], index);     var caret = $("<span id='caret'></span>")[0];     range.insertnode(caret);     var carettop = $("#caret").position().top;      // if preceding character space, wrap in span     if (previouscharacter == ' ') {         range.setstart($("div")[0].childnodes[0], index - 1);         range.setend($("div")[0].childnodes[0], index);         var prevchar = $("<span id='prevchar'></span>")[0];         range.insertnode(prevchar);         var prevchartop = $("#prevchar").position().top;     }      // set textarea selection selection start     $(this).focus();     $(this).setselection(index, selection.end);      // if top value of previous character span not equal top value of next word,     // there must have been wrapping going on, previous character space, wrapping     // have occured after space, safe assume left , top value of `#nextword`     // indicate caret position     if (prevchartop != undefined && prevchartop != nextwordtop) {         $("label").text('x: ' + $("#nextword").position().left + 'px, y: ' + $("#nextword").position().top);         $('ul').css('left', ($("#nextword").position().left) + 'px');         $('ul').css('top', ($("#nextword").position().top + 13) + 'px');     }     // if not, there no wrapping, can take left , top value `#caret`         else {         $("label").text('x: ' + $("#caret").position().left + 'px, y: ' + $("#caret").position().top);         $('ul').css('left', ($("#caret").position().left) + 'px');         $('ul').css('top', ($("#caret").position().top + 14) + 'px');     }      $('ul').css('display', 'block'); }  $("textarea").click(gettextareaxandy); $("textarea").keyup(gettextareaxandy);

html

<div></div> <textarea>lorem ipsum dummy text of printing , typesetting industry. lorem ipsum has been industry's standard dummy text ever since 1500s, when unknown printer took galley of type , scrambled make type specimen book.</textarea> <label></label> <ul>     <li>why don't type this..</li> </ul>

css

body {     font-family: verdana;     font-size: 12px;     line-height: 14px; } textarea, div {     font-family: verdana;     font-size: 12px;     line-height: 14px;     width: 300px;     display: block;     overflow: hidden;     border: 1px solid black;     padding: 0;     margin: 0;     resize: none;     min-height: 300px;     position: absolute;     -moz-box-sizing: border-box;     white-space: pre-wrap; } span {     display: inline-block;     height: 14px;     position: relative; } span#caret {     display: inline; } label {     display: block;     margin-left: 320px; } ul {     padding: 0px;     margin: 9px;     position: absolute;     z-index: 999;     border: 1px solid #000;     background-color: #fff;     list-style-type:none;     display: none; } @media screen , (-webkit-min-device-pixel-ratio:0) {     span {         white-space: pre-wrap;     } } div {     /* firefox wrapping fix */     -moz-padding-end: 1.5px;     -moz-padding-start: 1.5px;     /* ie8/ie9 wrapping fix */     padding-right: 5px\0/;     width: 295px\0/; } span#caret {     display: inline-block\0/; }

Popular posts from this blog

How to calculate SNR of signals in MATLAB? -

-
i've encountered simple, yet fundamental problem on calculating snr: there several signals : s1 = original , pure clean signal without noise. n1 = white gaussian noise going added s1. s2 = s1 + n1 (the noisy signal before performing noise-reduction algorithm) s3 = noise-reduced signal (after performing noise reduction algorithm) n2 = s3 - s1 (the amount of noise after performing noise-reduction algorithm) now want compare snr before , after performing noise-reduction algorithm. which signals should consider snr_before!? s1/n1 or s2/n1 ? which signals should consider snr_after!? s3/n1 or s3/n2 ? which commands or functions should use in matlab in order compute snr_before , snr_after? thanks billion putting time on helping me. what know calculating snr before : snrbeforenoise = mean( signal .^ 2 ) / mean( noise .^ 2 ); and snr after : residual_noise = signal - noise_reduced_signal; snr_after = mean( signal .^ 2 ) / mean( residual_noise .^ 2...
Read more

c# - Attempting to upload to FTP: System.Net.WebException: System error -

-
i have api takes in xml , uploads files based on information in xml. uploads on schedule (also xml), , have tested surrounding , know works. i getting error 40% of time on first file attempt upload in each time cycle (time cycle = 45 minutes files, 30 minutes others). here code upload: try { loggerftp.log("uploading file: " + filename, false); // create request. ftpwebrequest request = (ftpwebrequest)webrequest.create(appsettingsftp.ftpurl + @"/" + filename); request.method = webrequestmethods.ftp.uploadfile; request.timeout = 6000000; //set 100 minutes //request.timeout = -1; //set infinite // add login credentials. request.credentials = new networkcredential(appsettingsftp.ftplogin, appsettingsftp.ftppassword); // grab file contents. streamreader sourcestream = new streamreader(appsettingsftp.uploadfiledirectory + filename); byte[] filecontents = encoding.utf8.getbytes(sourcestream.readtoend()); sourcest...
Read more

ios - UISlider customization: how to properly add shadow to custom knob image -

-
Image
i need place custom knob image shadow uislider. far have image of 38x38, of there region defines shadow of knob. now while using image, when slide knob extreme ends actual knob not able cover end points, hence end points visible under transparent region of knob image this code using customize uislider uiimage *slidebtimg = [uiimage imagenamed:sliderknobimg]; [self.ratingslider setthumbimage:slidebtimg forstate:uicontrolstatenormal]; [self.ratingslider setthumbimage:slidebtimg forstate:uicontrolstatehighlighted]; how can implement custom knob shadow beneath it, covering end points?? look inside uislider.h , there methods let customize slider knob , track needed. (ios 2.0 , above) // lets subclass lay out track , thumb needed - (cgrect)minimumvalueimagerectforbounds:(cgrect)bounds; - (cgrect)maximumvalueimagerectforbounds:(cgrect)bounds; - (cgrect)trackrectforbounds:(cgrect)bounds; - (cgrect)thumbrectforbounds:(cgrect)bounds trackrect:(cgrect)rect value:...
Read more