Calculation of left of a column in a </a></h1> </div> <div class="grid fw-wrap pb8 mb16 bb bc-black-075"> <div class="grid--cell ws-nowrap mr16 mb8" title="2016-01-12 19:07:53Z"> <span class="fc-light mr2">Asked</span> <time itemprop="dateCreated" datetime="2015-12-10T05:26:26.703" class="fromnow">Dec 10 '15 at 05:26</time> </div> <div class="grid--cell ws-nowrap mr16 mb8"> <span class="fc-light mr2">Active</span> <time class="fromnow" title="2015-12-10T10:53:00.143" datetime="2015-12-10T10:53:00.143">Dec 10 '15 at 10:53</a> </div> <div class="grid--cell ws-nowrap mb8" title="Viewed 73 times"> <span class="fc-light mr2">Viewed</span> 73 times </div> </div> <div id="mainbar" role="main" aria-label="questions and answers"> <div id="question" class="question" data-questionid="34194314" data-ownerid="2996624" data-score="2"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="34194314"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="2">2</div> <button class="js-bookmark-btn s-btn s-btnunset c-pointer py4"> <svg aria-hidden="true" class="svg-icon iconBookmark" width="18" height="18" viewBox="0 0 18 18"><path d="M6 1a2 2 0 00-2 2v14l5-4 5 4V3a2 2 0 00-2-2H6zm3.9 3.83h2.9l-2.35 1.7.9 2.77L9 7.59l-2.35 1.7.9-2.76-2.35-1.7h2.9L9 2.06l.9 2.77z"></path></svg> <div class="js-bookmark-count mt4" data-value="0">0</div> </button> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>I have a <code><textarea></code> with say 40 columns. Can i get the <code>left: Xpx;</code> of a character typed in the <code><textarea></code>. For Example: <br/> <code><textarea>Hi, my name is Tushar Shukla</textarea></code><br/> In this sentence, can i determine what would be the <code>left</code> of character <strong>'T'</strong> in the <code><textbox></code><br/> <strong>I don't want to know in what column is my character residing but its distance from the left edge of my textbox!</strong><br/> I have no idea if this is actually possible!!<br/> Any suggestions?<br/><br/> <strong>UPDATE</strong> I do not want continuous copy pasting of textarea to a div every time the user presses a key (i'm making this function to run on keyup event). </p></div> <div class="mt24 mb12"> <div class="post-taglist grid gs4 gsy fd-column"> <div class="grid ps-relative"> <a href="../../questions/tagged/javascript" class="post-tag js-gps-track" title="show questions tagged 'javascript'" rel="tag">javascript</a> <a href="../../questions/tagged/jquery" class="post-tag js-gps-track" title="show questions tagged 'jquery'" rel="tag">jquery</a> <a href="../../questions/tagged/html" class="post-tag js-gps-track" title="show questions tagged 'html'" rel="tag">html</a> <a href="../../questions/tagged/textarea" class="post-tag js-gps-track" title="show questions tagged 'textarea'" rel="tag">textarea</a> </div> </div> </div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="user-info "> <div class="user-action-time">edited <span title="2015-12-10T10:53:00.143" class="relativetime">Dec 10 '15 at 10:53</span></div> <div class="user-gravatar32"></div> <div class="user-details" itemprop="author" itemscope="" itemtype="http://schema.org/Person"> <span class="d-none" itemprop="name">Tushar Shukla</span> <div class="-flair"></div> </div> </div> </div> <div class="post-signature owner grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Dec 10 '15 at 05:26">asked Dec 10 '15 at 05:26</time> <a href="../../users/2996624/tushar-shukla" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/2996624.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Tushar Shukla" /> </a> <div class="s-user-card--info"> <a href="../../users/2996624/tushar-shukla" class="s-user-card--link">Tushar Shukla</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">5,666</li> <li class="s-award-bling s-award-blinggold" title="2 gold badges">2</li> <li class="s-award-bling s-award-blingsilver" title="27 silver badges">27</li> <li class="s-award-bling s-award-blingbronze" title="41 bronze badges">41</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-34194314" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="34194314" data-min-length="15"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> <li id="comment-56134642" class="comment js-comment " data-comment-id="56134642" data-comment-owner-id="4286710" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment56134642_34194314"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">what number of character you want in your textbox.</span> – <a href="../../users/4286710/ankit-kathiriya" title="1,221 reputation" class="comment-user ">Ankit Kathiriya</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/34194314/calculation-of-left-of-a-column-in-a-textarea#comment56134642_34194314"><span title="2015-12-10T05:28:49.037 License: CC BY-SA 3.0" class="relativetime-clean">Dec 10 '15 at 05:28</span></a></span> </div> </div> </li> <li id="comment-56134650" class="comment js-comment " data-comment-id="56134650" data-comment-owner-id="5256582" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment56134650_34194314"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Do you want Tushar start from left of textarea? or please do more specific.</span> – <a href="../../users/5256582/chonchol-mahmud" title="2,717 reputation" class="comment-user ">Chonchol Mahmud</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/34194314/calculation-of-left-of-a-column-in-a-textarea#comment56134650_34194314"><span title="2015-12-10T05:29:13.180 License: CC BY-SA 3.0" class="relativetime-clean">Dec 10 '15 at 05:29</span></a></span> </div> </div> </li> <li id="comment-56134703" class="comment js-comment " data-comment-id="56134703" data-comment-owner-id="3218692" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment56134703_34194314"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Is it pretty interesting and it seems to be nearly impossible. There is no native way to do this. What about calculating it yourself - there are too many factors to be included into calculations - font, size, browser-specific things. What is an actual need to do this?</span> – <a href="../../users/3218692/yeldar-kurmangaliyev" title="33,467 reputation" class="comment-user ">Yeldar Kurmangaliyev</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/34194314/calculation-of-left-of-a-column-in-a-textarea#comment56134703_34194314"><span title="2015-12-10T05:31:40.720 License: CC BY-SA 3.0" class="relativetime-clean">Dec 10 '15 at 05:31</span></a></span> </div> </div> </li> <li id="comment-56134853" class="comment js-comment " data-comment-id="56134853" data-comment-owner-id="2996624" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment56134853_34194314"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">@AnkitKathiriya There is no specified number of characters i want in textbox. It can be anything that the user types!</span> – <a href="../../users/2996624/tushar-shukla" title="5,666 reputation" class="comment-user owner">Tushar Shukla</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/34194314/calculation-of-left-of-a-column-in-a-textarea#comment56134853_34194314"><span title="2015-12-10T05:39:10.777 License: CC BY-SA 3.0" class="relativetime-clean">Dec 10 '15 at 05:39</span></a></span> </div> </div> </li> <li id="comment-56134873" class="comment js-comment " data-comment-id="56134873" data-comment-owner-id="2996624" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment56134873_34194314"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">@ChoncholMahmud No, I want to put a `<span>` above the textarea at the position of that character.</span></span> – <a href="../../users/2996624/tushar-shukla" title="5,666 reputation" class="comment-user owner">Tushar Shukla</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/34194314/calculation-of-left-of-a-column-in-a-textarea#comment56134873_34194314"><span title="2015-12-10T05:40:30.470 License: CC BY-SA 3.0" class="relativetime-clean">Dec 10 '15 at 05:40</span></a></span> </div> </div> </li> <li id="comment-56134915" class="comment js-comment " data-comment-id="56134915" data-comment-owner-id="2996624" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment56134915_34194314"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">@YeldarKurmangaliyev Why would i calculate it myself, it is meant to be dynamic in respect to what the user will type. ANd yes, there are lot of factors but things like font size can be calculated!</span> – <a href="../../users/2996624/tushar-shukla" title="5,666 reputation" class="comment-user owner">Tushar Shukla</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/34194314/calculation-of-left-of-a-column-in-a-textarea#comment56134915_34194314"><span title="2015-12-10T05:42:49.487 License: CC BY-SA 3.0" class="relativetime-clean">Dec 10 '15 at 05:42</span></a></span> </div> </div> </li> <li id="comment-56135907" class="comment js-comment " data-comment-id="56135907" data-comment-owner-id="1061141" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment56135907_34194314"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">can you add a FIDDLE showing what you have tried ?</span> – <a href="../../users/1061141/mayank" title="1,351 reputation" class="comment-user ">Mayank</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/34194314/calculation-of-left-of-a-column-in-a-textarea#comment56135907_34194314"><span title="2015-12-10T06:24:01.280 License: CC BY-SA 3.0" class="relativetime-clean">Dec 10 '15 at 06:24</span></a></span> </div> </div> </li> <li id="comment-56136092" class="comment js-comment " data-comment-id="56136092" data-comment-owner-id="2996624" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment56136092_34194314"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">@Mayank Sorry but i' still experimenting so i don't have any solid code to show as of now. But i guess this can be done if put the content before the desired text into a span and calculate its width and then provide the same width as left to my character! Still trying!!</span> – <a href="../../users/2996624/tushar-shukla" title="5,666 reputation" class="comment-user owner">Tushar Shukla</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/34194314/calculation-of-left-of-a-column-in-a-textarea#comment56136092_34194314"><span title="2015-12-10T06:30:48.347 License: CC BY-SA 3.0" class="relativetime-clean">Dec 10 '15 at 06:30</span></a></span> </div> </div> </li> <li id="comment-56136373" class="comment js-comment " data-comment-id="56136373" data-comment-owner-id="1061141" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment56136373_34194314"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Why you want to calculate the `left: Xpx;` typed into textarea. Any specific reason ? can you tell me the scenario where you need the above functionality ?</span> – <a href="../../users/1061141/mayank" title="1,351 reputation" class="comment-user ">Mayank</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/34194314/calculation-of-left-of-a-column-in-a-textarea#comment56136373_34194314"><span title="2015-12-10T06:41:29.350 License: CC BY-SA 3.0" class="relativetime-clean">Dec 10 '15 at 06:41</span></a></span> </div> </div> </li> <li id="comment-56136659" class="comment js-comment " data-comment-id="56136659" data-comment-owner-id="2996624" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment56136659_34194314"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">@Mayank As i mentioned in my comment to @ChoncholMahmud above that i want to put a '<span>` tag just at the position of the desired character!</span></span> – <a href="../../users/2996624/tushar-shukla" title="5,666 reputation" class="comment-user owner">Tushar Shukla</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/34194314/calculation-of-left-of-a-column-in-a-textarea#comment56136659_34194314"><span title="2015-12-10T06:52:08.697 License: CC BY-SA 3.0" class="relativetime-clean">Dec 10 '15 at 06:52</span></a></span> </div> </div> </li> <li id="comment-56142126" class="comment js-comment " data-comment-id="56142126" data-comment-owner-id="893578" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment56142126_34194314"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Possible duplicate of [Get the offset position of the caret in a textarea in pixels](http://stackoverflow.com/questions/16212871/get-the-offset-position-of-the-caret-in-a-textarea-in-pixels)</span> – <a href="../../users/893578/sheepy" title="17,324 reputation" class="comment-user ">Sheepy</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/34194314/calculation-of-left-of-a-column-in-a-textarea#comment56142126_34194314"><span title="2015-12-10T09:45:07.933 License: CC BY-SA 3.0" class="relativetime-clean">Dec 10 '15 at 09:45</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> <div id="answers"> <a name="tab-top"></a> <div id="answers-header"> <div class="answers-subheader grid ai-center mb8"> <div class="grid--cell fl1"> <h2 class="mb0" data-answercount="9">0 Answers<span style="display:none;" itemprop="answerCount">0</span></h2> </div> </div> </div> </div> </div> </div> </div> <script src="../../static/js/stack-icons.js"></script> <script src="../../static/js/fromnow.js"></script> </body> </html>