<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>