課程
/前端開發
/jQuery
/jQuery基礎(三)—事件篇
現在是不管選中那個 都全部顯示 ?“用鼠標選中文字”，我想 只alert選中的文字
2016-09-03
源自：jQuery基礎(三)—事件篇 3-3
正在回答
<!DOCTYPE html>
<html>
<head>
? ? <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
? ? <title></title>
? ? <style>
? ? .left div,
? ? .right div {
? ? ? ? width: 500px;
? ? ? ? height: 80px;
? ? ? ? padding: 5px;
? ? ? ? margin: 5px;
? ? ? ? float: left;
? ? ? ? border: 1px solid #ccc;
? ? }
? ??
? ? .left div {
? ? ? ? background: #bbffaa;
? ? ? ? background: yellow;
? ? select {
? ? ? ? height: 100px;
? ? </style>
? ? <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
</head>
<body>
? ? <h2>input與textarea</h2>
? ? <div class="left">
? ? ? ? <h4>測試一</h4>
? ? ? ? <div class="aaron">
? ? ? ? ? ? 選中文字：input
? ? ? ? ? ? <input type="text" value="慕課網" />
? ? ? ? </div>
? ? ? ? <button id="bt1">觸發input元素的select事件</button>
? ? ? ??
? ? ? ? <h4>測試二</h4>
? ? ? ? ? ? textarea：
? ? ? ? ? ? <textarea rows="3" cols="20">用鼠標選中文字</textarea>
? ? </div>
?
? ? <script type="text/javascript">
? ? //監聽input元素中value的選中
? ? //觸發元素的select事件
? ? $("input").select(function(e){
? ? ? ? alert(e.target.value)
? ? ? ? return false
? ? })
? ? $("#bt1").click(function(){
? ? ? ? $("input").select();
? ? //監聽textarea元素中value的選中
? ? $('textarea').select(function(e) {
? ? ? ? alert(window.getSelection().toString());//非IE內核瀏覽器可以用這種方法，考慮兼容性的話你可以用getselectionstart()和getselectionend()
? ? });
? ? </script>
</body>
</html>
第二熱情 提問者
舉報
jQuery第三階段開啟事件修煉，掌握對頁面進行交互的操作
2 回答怎樣調用select才能讓input中的字選中并且僅執行一次函數？
3 回答怎么樣才能實時獲取到keydown輸入的值？
1 回答如果想把當前按下的這個鍵alert出來怎么辦？
2 回答alert后面輸出這個是什么意思
1 回答最后面哪個 a();是什么意思？
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2016-09-04
<!DOCTYPE html>
<html>
<head>
? ? <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
? ? <title></title>
? ? <style>
? ? .left div,
? ? .right div {
? ? ? ? width: 500px;
? ? ? ? height: 80px;
? ? ? ? padding: 5px;
? ? ? ? margin: 5px;
? ? ? ? float: left;
? ? ? ? border: 1px solid #ccc;
? ? }
? ??
? ? .left div {
? ? ? ? background: #bbffaa;
? ? }
? ??
? ? .right div {
? ? ? ? background: yellow;
? ? }
? ??
? ? select {
? ? ? ? height: 100px;
? ? }
? ? </style>
? ? <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
</head>
<body>
? ? <h2>input與textarea</h2>
? ? <div class="left">
? ? ? ? <h4>測試一</h4>
? ? ? ? <div class="aaron">
? ? ? ? ? ? 選中文字：input
? ? ? ? ? ? <input type="text" value="慕課網" />
? ? ? ? </div>
? ? ? ? <button id="bt1">觸發input元素的select事件</button>
? ? ? ??
? ? ? ? <h4>測試二</h4>
? ? ? ? <div class="aaron">
? ? ? ? ? ? textarea：
? ? ? ? ? ? <textarea rows="3" cols="20">用鼠標選中文字</textarea>
? ? ? ? </div>
? ? </div>
?
? ? <script type="text/javascript">
? ? //監聽input元素中value的選中
? ? //觸發元素的select事件
? ? $("input").select(function(e){
? ? ? ? alert(e.target.value)
? ? ? ? return false
? ? })
? ? $("#bt1").click(function(){
? ? ? ? $("input").select();
? ? })
? ? //監聽textarea元素中value的選中
? ? $('textarea').select(function(e) {
? ? ? ? alert(window.getSelection().toString());//非IE內核瀏覽器可以用這種方法，考慮兼容性的話你可以用getselectionstart()和getselectionend()
? ? });
? ? </script>
</body>
</html>