<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(textarea.value, "内容111");
console.log(textarea.cols, "宽度");
console.log(obj, "直接绑定this");
console.log(obj.value, "内容222");
console.log(obj.offsetTop, "相对定位容器的位置");
console.log(obj.clientTop, "上边框宽度");
//获取鼠标的坐标也可以：参考demo:https://www.cnblogs.com/incredible-x/p/9960622.html
var e= e || window.event;
console.log(e.clientX, "鼠标坐标");
console.log(e.pageX, "容器坐标");
console.log(e.screenX, "浏览器坐标");
//功能例子:
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>
原文：https://www.cnblogs.com/wheatCatcher/p/10283035.html