前端菜鸟入门笔记——文本框操作 

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

 

posted @ 2019-01-17 16:39  桥南小院  阅读(2291)  评论(0)    收藏  举报