Sự kiện kích hoạt khi dấu mũ di chuyển giữa các dòng trong textarea

Có cách nào để có một sự kiện văn bản kích hoạt sự kiện nếu người dùng thay đổi dòng chữ trên, bằng cách nhấp hoặc sử dụng mũi tên lên/xuống? Hay điều này không thể thực hiện được trong Javascript? Tôi đã tìm cách tìm/thiết lập vị trí hiện tại của dấu mũ, nhưng đó không phải là những gì tôi cần ...Sự kiện kích hoạt khi dấu mũ di chuyển giữa các dòng trong textarea

Nguồn

2011-11-17 NumerousHats

thể trùng lặp của [Tìm giá trị của dòng hiện tại của một sử dụng 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ó sự khác biệt đáng kể giữa \ n và dòng mà người dùng nhìn thấy trong vùng văn bản. Ví dụ: nhận xét này không có dòng đơn mới nhưng tôi đã ở dòng thứ ba của vùng văn bản :) – <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: OP không đủ cụ thể để chúng tôi nói, nhưng đáng giá chỉ trong trường hợp đó là những gì anh ta đang tìm kiếm. Đó là lý do tại sao bình luận nói * "có thể trùng lặp ..." *. – <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">Trả lời</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>Có vẻ như bạn cần đăng ký một vài sự kiện cho vùng văn bản của bạn. trên đầu của tôi, một sự kiện bấm, và một sự kiện nhấn phím với nhiều giá trị mã phím. Bạn có cần phải sử dụng javascript tinh khiết, hoặc bạn có một số thư viện javascript để sử dụng?</p> <p>Bạn có cần trợ giúp đăng ký sự kiện không? hoặc bạn cần trợ giúp tìm vị trí dấu mũ trong một trong các sự kiện? (xem liên kết của Andy cho điều đó) hoặc là câu trả lời cho cả hai câu hỏi của tôi "có"?</p> <hr> <h1>chỉnh sửa</h1> <p>ok, từ ý kiến mà bạn đang bạn ok với jquery, và các plugin fieldselection ngăn bạn lại phát minh ra bánh xe.</p> <ol> <li>xác định mọi phím, nhấp chuột, sao chép? các sự kiện có thể di chuyển dấu mũ trong trường văn bản. <a href="http://en.wikipedia.org/wiki/Text_box" rel="nofollow noreferrer">Navigate and select portions of text, wikipedia</a></li> <li>trong sự kiện, sử dụng plugin chọn trường để nhận vị trí dấu mũ mới.</li> <li>sử dụng vị trí hiện tại caret & & font size & hộp & văn bản kích thước vật lý & đếm & linebreak để xác định xem bạn đã chuyển sang một dòng mới.</li> <li>nếu bạn đã chuyển đổi dòng, kích hoạt sự kiện jQuery tùy chỉnh để thực hiện công việc bạn muốn.</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>tham chiếu stack overflow.</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">Nguồn</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 và đây là ví dụ về plugin chọn trường jQuery 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">Xem nhận xét của tôi ở trên ...Vì vậy, nó có vẻ như nó sẽ là khả thi, và cách để làm điều đó là bằng cách theo dõi các nhấp chuột và bấm phím và sau đó so sánh dòng trước và hiện tại và xem nếu có một sự thay đổi? Tôi có thể hình dung ra, một khi tôi thấy chiến lược. – <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">Và có, tôi không phản đối thư viện. Tôi gần như chắc chắn sẽ được sử dụng jQuery cho các khía cạnh khác của dự án (nếu tôi chọn để làm điều đó như là một 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=1644592049017"></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"> Câu hỏi mới nhất </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://vi.uwenku.com/question/p-rgiuwhgx-x.html" target="_blank" title="django: sự khác biệt giữa chuyển hướng tạm thời và chuyển hướng vĩnh viễn là gì?"> django: sự khác biệt giữa chuyển hướng tạm thời và chuyển hướng vĩnh viễn là gì? </a> </li> <li class="side_article_list_item"> 2. <a href="http://vi.uwenku.com/question/p-utjbuosd-c.html" target="_blank" title="SQL split dấu phẩy tách ra hàng"> SQL split dấu phẩy tách ra hàng </a> </li> <li class="side_article_list_item"> 3. <a href="http://vi.uwenku.com/question/p-cpzvmglw-be.html" target="_blank" title="Làm thế nào thiết lập ViewPager bên trong một Fragment"> Làm thế nào thiết lập ViewPager bên trong một Fragment </a> </li> <li class="side_article_list_item"> 4. <a href="http://vi.uwenku.com/question/p-wfuryprz-bc.html" target="_blank" title="ps aux | grep trả pid cho bản thân quá"> ps aux | grep trả pid cho bản thân quá </a> </li> <li class="side_article_list_item"> 5. <a href="http://vi.uwenku.com/question/p-zravjbbu-w.html" target="_blank" title="Biến đổi cosin rời rạc (DCT) của hình ảnh"> Biến đổi cosin rời rạc (DCT) của hình ảnh </a> </li> <li class="side_article_list_item"> 6. <a href="http://vi.uwenku.com/question/p-hepdkgnh-n.html" target="_blank" title="Trong Golang, làm thế nào để bạn chuyển đổi một slice thành một mảng"> Trong Golang, làm thế nào để bạn chuyển đổi một slice thành một mảng </a> </li> <li class="side_article_list_item"> 7. <a href="http://vi.uwenku.com/question/p-xukhrleq-bn.html" target="_blank" title="Count và sắp xếp theo số lần xuất hiện"> Count và sắp xếp theo số lần xuất hiện </a> </li> <li class="side_article_list_item"> 8. <a href="http://vi.uwenku.com/question/p-pviapoed-bd.html" target="_blank" title="Làm cách nào để tải các mẫu Django?"> Làm cách nào để tải các mẫu Django? </a> </li> <li class="side_article_list_item"> 9. <a href="http://vi.uwenku.com/question/p-flbzfxpc-x.html" target="_blank" title="dynamodb nút AWS-sdk đơn giản GetItem() gọi"> dynamodb nút AWS-sdk đơn giản GetItem() gọi </a> </li> <li class="side_article_list_item"> 10. <a href="http://vi.uwenku.com/question/p-pefvnweq-u.html" target="_blank" title="lỗi: đi qua 'const ...' 'là 'này' đối số của' ...' loại bỏ vòng loại"> lỗi: đi qua 'const ...' 'là 'này' đối số của' ...' loại bỏ vòng loại </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> Các vấn đề liên quan</h3> </div> <div class="article-relative-content"> <ul class="side_article_list"> <li class="side_article_list_item">Không có vấn đề liên quan^_^</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://vi.uwenku.com/contact">Liên lạc với chúng tôi</a></li> <li>© 2020 VI.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>