Evento di attivazione quando il cursore si sposta tra le righe nell'area di testo

Esiste un modo per attivare un'area di testo in un evento se l'utente modifica la riga su cui si trova il cursore, ad esempio facendo clic o utilizzando le frecce su/giù? O questo non è possibile in Javascript? Ho trovato dei modi per trovare/impostare la posizione corrente del cursore, ma non è quello che mi serve ...Evento di attivazione quando il cursore si sposta tra le righe nell'area di testo

fonte

2011-11-17 NumerousHats

possibile duplicato del [Trova valore della linea di corrente di un utilizzando JavaScript] (http://stackoverflow.com/questions/3153995/find-value-of-current-line-of-a- textarea-using-javascript) – <span class="text-secondary"> <small> <span></span> </small> </span> </p> </div> </div> </div> <div itemprop="comment" class="post-comment"> <div class="row"> <div class="col-lg-1"><span class="text-secondary">+0</span></div> <div class="col-lg-11"> <p class="commenttext">@AndyE C'è una differenza piuttosto sostanziale tra \ n e una linea che l'utente vede in una textarea. Ad esempio, questo commento non ha una nuova riga ma io sono già sulla terza riga della textarea :) – <span class="text-secondary"> <small> <a rel="noopener" target="_blank" href="https://stackoverflow.com/users/995876/">Esailija</a></span> <span></span> </small> </span> </p> </div> </div> </div> <div itemprop="comment" class="post-comment"> <div class="row"> <div class="col-lg-1"><span class="text-secondary">+0</span></div> <div class="col-lg-11"> <p class="commenttext">@Esailija: l'OP non era abbastanza specifico per noi da dire, ma vale la pena segnalarlo nel caso in cui sia cosa sta cercando. Ecco perché il commento dice * "possibile duplicato ..." *. – <span class="text-secondary"> <small> <span></span> </small> </span> </p> </div> </div> </div> </div> </div> </article> </div> <div class="answer-title"> <span class="text-logo margin-top-sm">A</span> <h2 class="title h4">risposta</h2> </div> <div class="item-description text-md markdown-body margin-bottom-40 voidso"> <article class="board-top-1 padding-top-10"> <div class="post-col vote-info"> <span class="count">3<i class="fa fa-thumbs-up"></i></span> <i class="fa fa-check fa-2x"></i> </div> <div class="post-offset"> <div class="answer fmt"> <p>Sembra che tu debba registrare un paio di eventi per la tua area di testo. In cima alla mia testa, un evento click e un evento keypress con più valori keycode. Hai bisogno di usare puro javascript o hai alcune librerie javascript da utilizzare?</p> <p>Hai bisogno di aiuto per la registrazione degli eventi? o hai bisogno di aiuto per trovare la posizione del cursore durante uno degli eventi? (vedi il link di andy per quello) o è la risposta a entrambe le mie domande "sì"?</p> <hr> <h1>modificare</h1> <p>ok, da sei commenti che stai bene con jQuery e il plugin fieldselection vi impedisce di re-inventare la ruota.</p> <ol> <li>identificare i tasti della tastiera, i clic del mouse,? Copia incolla? eventi che potrebbero spostare il cursore in un campo di testo. <a href="http://en.wikipedia.org/wiki/Text_box" rel="nofollow noreferrer">Navigate and select portions of text, wikipedia</a></li> <li>durante l'evento, utilizzare il plugin fieldelection per ottenere la nuova posizione del punto di inserimento.</li> <li>utilizzare la posizione del cursore corrente & carattere & dimensioni & casella di testo & dimensione fisica & conteggio & interruzione di linea per determinare se si è passati ad una nuova linea.</li> <li>se hai cambiato riga, attiva un evento jQuery personalizzato per eseguire il lavoro desiderato.</li> </ol> <p>// jQuery 1,7</p> <pre><code class="prettyprint-override">$(document).ready(function(){ var currentLine = -1; $("#textAreaID").on("keypress", function(evt){ if(evt.which === 40 || ...){ //down arrow key, enter key, page down key, all will move the caret to a newline $(this).trigger("newline"); }else{ //a ton of text in a fixed width textarea will move the cursor to a newline $(this).trigger("checkForNewline"); } }).on("click checkForNewline", function(evt){ var jqElem = $(this); //fieldSelection plugin call var range = jqElem.getSelection(); if(range["row"] && range["row"] !== currentLine){ currentLine = range["row"]; jqElem.trigger("newline"); }else{ var handTypedNewlines = jqElem.val().split(/\r\n|\r|\n/); var userTypedRowcounts = Math.floor(wholeString.length/jqElem.cols) + (handTypedNewlines instanceof 'object')?handTypedNewlines.length:0; if(userTypedRowcounts != currentLine){ currentLine = userTypedRowcounts; jqElem.trigger("newline"); } } }).on("newline", function(evt){ // do your work, caret is on a newline. }); }); </code></pre> <p>riferimento overflow dello stack.</p> <p><a href="https://stackoverflow.com/questions/1155678/javascript-string-newline-character/1156388#1156388">reference to get .split() regex</a></p> </div> <div class="post-info"> <div class="post-meta row"> <p class="text-secondary col-lg-6"> <span class="source"> <a rel="noopener" target="_blank" href="https://stackoverflow.com/q/8170696">fonte</a> </span> </p> <p class="text-secondary col-lg-6"> <span class="float-right date"> <span>2011-11-17 16:28:26</span> <a rel="noopener" target="_blank" href="https://stackoverflow.com/users/176818/">DefyGravity</a></span> </p> <p class="col-12"></p> <p class="col-12"></p></div> </div>  <div class="comments"> <div itemprop="comment" class="post-comment"> <div class="row"> <div class="col-lg-1"><span class="text-secondary">+0</span></div> <div class="col-lg-11"> <p class="commenttext">http://stackoverflow.com/q/1937120/176818 ed ecco un esempio del plugin jQuery fieldelection http://laboratorium.0xab.cd/jquery/fieldselection/0.2.3-test/test.html – <span class="text-secondary"> <small> <a rel="noopener" target="_blank" href="https://stackoverflow.com/users/176818/">DefyGravity</a></span> <span></span> </small> </span> </p> </div> </div> </div> <div itemprop="comment" class="post-comment"> <div class="row"> <div class="col-lg-1"><span class="text-secondary">+0</span></div> <div class="col-lg-11"> <p class="commenttext">Vedi i miei commenti sopra ...Quindi, sembra che dovrebbe essere fattibile, e il modo per farlo è tenere traccia dei clic e dei tasti e quindi confrontare la linea precedente e quella corrente e vedere se c'è stato un cambiamento? Dovrei riuscire a capirlo, una volta che vedo la strategia. – <span class="text-secondary"> <small> <a rel="noopener" target="_blank" href="https://stackoverflow.com/users/873603/">NumerousHats</a></span> <span></span> </small> </span> </p> </div> </div> </div> <div itemprop="comment" class="post-comment"> <div class="row"> <div class="col-lg-1"><span class="text-secondary">+0</span></div> <div class="col-lg-11"> <p class="commenttext">E sì, non ho obiezioni alle librerie. Quasi certamente userò jQuery per altri aspetti del progetto (se scelgo di farlo come webapp ...) – <span class="text-secondary"> <small> <a rel="noopener" target="_blank" href="https://stackoverflow.com/users/873603/">NumerousHats</a></span> <span></span> </small> </span> </p> </div> </div> </div> </div> </div> </article> <div> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6208739752673518" data-ad-slot="1038284119" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> <div class="clearfix"> </div> <div> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-6208739752673518" data-ad-slot="1575177025"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="padding-top-10"></div> </div> </div> <script type="text/javascript" src="http://img.uwenku.com/uwenku/script/side.js?t=1644592048671"></script> <script type="text/javascript" src="http://img.uwenku.com/uwenku/plugin/highlight/highlight.pack.js"></script> <link href="http://img.uwenku.com/uwenku/plugin/highlight/styles/docco.css" media="screen" rel="stylesheet" type="text/css" /> <script type="text/javascript"> $('pre').each(function(i, e) { hljs.highlightBlock(e, "<span class='indent'> </span>", false) }); </script> <div class="col-lg-3 col-md-4 col-sm-5"> <div id="rightTop"> <div class="row"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6208739752673518" data-ad-slot="5415218910" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="row sidebar panel panel-default"> <div class="panel-heading font-bold"> Ultima domanda </div> <div class="m-b-sm m-t-sm clearfix"> <ul class="side_article_list"> <li class="side_article_list_item"> 1. <a href="http://it.uwenku.com/question/p-evfkjlpy-bk.html" target="_blank" title="Strano comportamento DES: la decrittografia viene eseguita con successo utilizzando chiavi diverse"> Strano comportamento DES: la decrittografia viene eseguita con successo utilizzando chiavi diverse </a> </li> <li class="side_article_list_item"> 2. <a href="http://it.uwenku.com/question/p-rvinwuoe-m.html" target="_blank" title="Proprietà dell'iniezione in Asp.Net Core"> Proprietà dell'iniezione in Asp.Net Core </a> </li> <li class="side_article_list_item"> 3. <a href="http://it.uwenku.com/question/p-onlgktuu-br.html" target="_blank" title="d3 zoom e aggiornamento pan alla versione 4"> d3 zoom e aggiornamento pan alla versione 4 </a> </li> <li class="side_article_list_item"> 4. <a href="http://it.uwenku.com/question/p-frrnltni-r.html" target="_blank" title="Come utilizzare i caricatori di Webpack in un'app Node?"> Come utilizzare i caricatori di Webpack in un'app Node? </a> </li> <li class="side_article_list_item"> 5. <a href="http://it.uwenku.com/question/p-vwzjzipg-b.html" target="_blank" title="Utilizzo del filtro di valuta degli angoli con un numero intero di centesimi"> Utilizzo del filtro di valuta degli angoli con un numero intero di centesimi </a> </li> <li class="side_article_list_item"> 6. <a href="http://it.uwenku.com/question/p-obacrspt-a.html" target="_blank" title="Utilizzare le impostazioni comuni in SBT `RootProject`"> Utilizzare le impostazioni comuni in SBT `RootProject` </a> </li> <li class="side_article_list_item"> 7. <a href="http://it.uwenku.com/question/p-uukmqywy-be.html" target="_blank" title="Come gestire i valori di default nelle chiamate di funzione (profondamente) nidificate?"> Come gestire i valori di default nelle chiamate di funzione (profondamente) nidificate? </a> </li> <li class="side_article_list_item"> 8. <a href="http://it.uwenku.com/question/p-grihnxxv-z.html" target="_blank" title="Come utilizzare System.Windows.Forms nella libreria di classi .NET Core"> Come utilizzare System.Windows.Forms nella libreria di classi .NET Core </a> </li> <li class="side_article_list_item"> 9. <a href="http://it.uwenku.com/question/p-nzfloloa-q.html" target="_blank" title="Come impostare swift 3 UITextField colore del bordo?"> Come impostare swift 3 UITextField colore del bordo? </a> </li> <li class="side_article_list_item"> 10. <a href="http://it.uwenku.com/question/p-krgnpecn-bm.html" target="_blank" title="Direttiva angolare2 - selettore con identificativi multipli"> Direttiva angolare2 - selettore con identificativi multipli </a> </li> </ul> </div> </div> </div> <p class="article-nav-bar"></p> <div class="row sidebar article-nav"> <div class="row box_white visible-sm visible-md visible-lg margin-zero"> <div class="top"> <h3 class="title"><i class="glyphicon glyphicon-th-list"></i> Problemi correlati</h3> </div> <div class="article-relative-content"> <ul class="side_article_list"> <li class="side_article_list_item">Nessun problema correlato^_^</li> </ul> </div> </div> </div> </div> </div> </div> </div>  <footer id="footer"> <div class="bg-simple lt"> <div class="container"> <div class="row padder-v m-t"> <div class="col-xs-8"> <ul class="list-inline"> <li><a href="http://it.uwenku.com/contact">Contattaci</a></li> <li>© 2020 IT.UWENKU.COM</li> <li><a target="_blank" href="https://beian.miit.gov.cn/">沪ICP备13005482号-4</a></li> <li><script type="text/javascript" src="https://v1.cnzz.com/z_stat.php?id=1280101193&web_id=1280101193"></script></li> <li><a href="http://www.uwenku.com/" target="_blank" title="优文库">简体中文</a></li> <li><a href="http://hk.uwenku.com/" target="_blank" title="優文庫">繁體中文</a></li> <li><a href="http://ru.uwenku.com/" target="_blank" title="поле вопросов и ответов">Русский</a></li> <li><a href="http://de.uwenku.com/" target="_blank" title="Frage - und - antwort - Park">Deutsch</a></li> <li><a href="http://es.uwenku.com/" target="_blank" title="Preguntas y respuestas">Español</a></li> <li><a href="http://hi.uwenku.com/" target="_blank" title="कार्यक्रम प्रश्न और उत्तर पार्क">हिन्दी</a></li> <li><a href="http://it.uwenku.com/" target="_blank" title="IL Programma di chiedere Park">Italiano</a></li> <li><a href="http://ja.uwenku.com/" target="_blank" title="プログラム問答園区">日本語</a></li> <li><a href="http://ko.uwenku.com/" target="_blank" title="프로그램 문답 단지">한국어</a></li> <li><a href="http://pl.uwenku.com/" target="_blank" title="program o park">Polski</a></li> <li><a href="http://tr.uwenku.com/" target="_blank" title="Program soru ve cevap parkı">Türkçe</a></li> <li><a href="http://vi.uwenku.com/" target="_blank" title="Đáp ứng viên">Tiếng Việt</a></li> <li><a href="http://fr.uwenku.com/" target="_blank" title="Programme interrogation Park">Française</a></li> </ul> </div> </div> </div> </div> </div> </footer>  <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?f78a970f17b19a79fc477a3378096f29"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </body> </html>