textbox 點選即文字全選 | chinggo - 點部落

2015-05-26

textbox 點選即文字全選

568
0
筆記

摘要:textbox 點選即文字全選

現在有一個需求，在 autocomplete 點擊就要全選文字 (user對於 autocomplete 就是要馬上選擇別筆資料...)

研究了一下，網路上較多是利用


$("#msg").live('focus',function(){ $(this).select(); });

利用 click 事件，接著 focus、 select 來完成

但其實會發現到，全選的事件 "偶爾會閃跳"

ex: 原本的 CSS 特效衝突...之類(在下才疏學淺...還不曉得有哪些衝突)

所以在網路上找到一個是利用 mouseup、 select 來完成

網路分享範例，有閃跳問題的 focus:

http://jsfiddle.net/Marcel/jvJzX/

Source Code: http://jsbin.com/torixo/3/edit

<script><![CDATA[ $(document).ready(function() { $("#focusmsg").on("click", function () { $(this).focus().select(); }); $("#mouseupmsg").on("click", function () { $(this).focus().select(); }); }); ]]></script><input id="focusmsg" type="text" value="Hello World" /> <input id="mouseupmsg" type="text" value="mouse" /> <p> </p> </div> <div class="article__tags"></div> <div class="article__navs"> <ul> <li><a href="/chinggo0216">回首頁</a></li> </ul> </div> <ins class="adsbygoogle" style="display: block !important" data-ad-client="ca-pub-5120420174726287" data-ad-slot="1709268749" data-ad-format="auto"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <div data-tag data-cid="aee4fef3-394e-49f3-9c03-e5e31d73ce7d" data-bid="c46a9272-b7bf-4d57-adac-103213bd6c1c" data-sname="" data-url="/chinggo0216/Tags?handler=BlogTagsList" class="article__ralated-posts"> </div> <div data-serial data-cid="aee4fef3-394e-49f3-9c03-e5e31d73ce7d" data-bid="c46a9272-b7bf-4d57-adac-103213bd6c1c" data-sname="筆記" data-url="/chinggo0216/Series?handler=BlogSeriesList" class="article__serial-posts"> </div> </article> </div> <div class="sidebar"> <div class="search-block mobi-hide"> <form method="get" action="/chinggo0216/Search"> <input name="q" placeholder="請用「空白」區分關鍵字" /> <button><i class="fa fa-search"></i></button> </form> </div> <div class="side-sticky"> <ins class="adsbygoogle" style="display: inline-block !important; width: 250px; height: 250px" data-ad-client="ca-pub-5120420174726287" data-ad-slot="8394930749"></ins> <script>(adsbygoogle = window.adsbygoogle || []).push({});</script> </div> <div class="side-block"> <header class="side-block__header"> <h4>系列文章</h4> </header> <div class="side-block__content" id="sidebar_series" data-url="/Blog/Sidebar?blogid=c46a9272-b7bf-4d57-adac-103213bd6c1c&blogName=chinggo0216&c=8&handler=SeriesPartial"> </div> </div> <div id="sidebar_link" data-url="/Blog/Sidebar?blogid=c46a9272-b7bf-4d57-adac-103213bd6c1c&handler=LinkPartial"></div> <input id="fnBlogList" name="fnBlogList" type="hidden" value="" /> </div> <input id="fnBlogDetail" name="fnBlogDetail" type="hidden" value="" /> <input id="fnView" name="fnView" type="hidden" value="/chinggo0216/2015/05/26/151402?handler=UpdateViewCount" /> <input name="__RequestVerificationToken" type="hidden" value="CfDJ8MjaPWR-N_pKkXr1PHzTouKybNlZVerQG3r5rEl3OAdJgiOBKP9yZcHBbp-mcf5fNBp9FqYNGjKig_0_ky1o-V1Qw7jTUoEQIvigQG4i6RgHt-eg9JniihJxZQ5YmSTx7TEP-7Ca9QapVv605IYJLvU" /> </div> </div> </div> <footer class="page-footer"> <div class="center-container"> <nav class="footer-nav"> <ul> <li><a data-fancybox data-type="iframe" href="/Policy?i=1">服務規範</a></li> <li><a href="https://m.me/Dotblogs" target="_blank">聯絡我們</a></li> </ul> </nav> <div class="copyright">© 2024 點部落 Ver. 2022.9.27.1 </div> <div class="host"> <a href="http://demoshop.tw" target="_blank">電魔小鋪有限公司</a> 製作、維運；<a href="http://www.itop.com.tw" target="_blank">登豐數位科技</a> 提供資安檢測 </div> </div> </footer> <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js" crossorigin="anonymous" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT"> </script> <script>(window.jQuery||document.write("\u003Cscript src=\u0022/lib/jquery/jquery.min.js\u0022 crossorigin=\u0022anonymous\u0022 integrity=\u0022sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV\u002BrXbYlF2cqB8txI/8aZajjp4Bqd\u002BV6D5IgvKT\u0022\u003E\u003C/script\u003E"));</script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <script src="/js/powered_by_demoshop.js?v=39Y68HHdNm1y6RipqrL8DxzmLT9RyvUd_DvJnPg6zrQ"></script> <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-575565756a486ff8"></script> </body> </html>