<html> <head> <title>文本框操作</title> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script type="text/javascript"> //2.原生js操作:點擊文本域觸發,使用onfocus()也可 function setTitleColor(obj) { var textarea = document.getElementById('txt1'); //console.log(textarea, "手動綁定id"); //console.log(obj, "直接綁定this"); //console.log(textarea.value, "內容111"); //console.log(obj.value, "內容222"); //console.log(textarea.cols, "文本框寬度"); //console.log(obj.offsetTop, "相對定位容器的位置"); //console.log(obj.clientTop, "上邊框寬度"); //參考demo:https://www.cnblogs.com/incredible-x/p/9960622.html //1.當前對象在不同大小的頁面中的絕對位置．參考:https://blog.csdn.net/zh_rey/article/details/78967174 var top = textarea.offsetTop; //div距離頁面邊框的間距:根據div位置改變 var left = textarea.offsetLeft; //div距離頁面邊框的間距:根據div位置改變 var textarea_position = "文本框當前位置（距離頁面邊框的間距）：(" + top + "," + left + ")"; //div擠壓到內容下面125-0 alert(textarea_position) var scrollTop = textarea.scrollTop; //網頁body被卷去(相對定位移動的距離)的高：默認0 var scrollLeft = textarea.scrollLeft; //網頁body被卷去的左：默認0 var scroll_position = "瀏覽器（絕對位置）：(" + scrollTop + "," + scrollLeft + ")"; var screenTop = window.screenTop; //網頁正文部分上-8 var screenLeft = window.screenLeft; //網頁正文部分左-8 var screen_position = "瀏覽器（絕對位置）：(" + screenTop + "," + screenLeft + ")"; //2.當前鼠標在不同大小的頁面中的位置：參考:https://blog.csdn.net/weixin_41342585/article/details/80659736 //默認e.clientX = e.pageX = screenX ：div擠壓到內容下面125-0;而e.offsetX是鼠標相對於容器的邊距:0-0 var e = e || window.event; var clientX = e.clientX; var clientY = e.clientY; var client_position = "鼠標當前位置：(" + clientX + "," + clientY + ")"; // alert(client_position) var offsetX = e.offsetX; var offsetY = e.offsetY; var offset_position = "光標當前位置：(" + offsetX + "," + offsetY + ")"; // alert(offset_position) //3.功能例子: var title = document.getElementById('title1'); title.style.background = 'yellow'; } //3.jquery操作(第三方js庫) function resetTitleColor() { //參考jquery官方API:https://www.jquery123.com/ //參考jquery教程API:http://www.w3school.com.cn/jquery/jquery_reference.asp //百度jQuery筆記:https://blog.csdn.net/qq_37957971/article/details/82812002 console.log($("textarea:focus"), "光標所在textarea元素的jquery對象（包含整個頁面節點的屬性）"); $('#title1').css("background", "#fff"); } </script> </head> <body> <!-- 1.首先參考html元素的API: http://www.w3school.com.cn/jsref/dom_obj_textarea.asp 屬性名/方法名/事件名 備注 defaultValue 設置或返回文本框中的初始內容。 disabled 設置或返回 textarea 是否應當被禁用。 readOnly 設置或返回 textarea 是否應當是只讀的。 rows 設置或返回 textarea 的高度。 tabIndex 設置或返回 textarea 的 tab 鍵控制次序。 type 返回該文本框的表單類型。 value 設置或返回在 textarea 中的文本。 .... blur() 從 textarea 移開焦點。 focus() 在 textarea 上設置焦點。 select() 選擇 textarea 中的文本。 onchange 當輸入值改變時調用的事件句柄(事件監聽) --> <h5 id="title1">標題xxxx</h5> 左邊內容xxxx：<textarea cols="40" rows="5" id="txt1" onclick="setTitleColor(this)" onblur="resetTitleColor()">Hello world....</textarea> </body> </html>