zoukankan      html  css  js  c++  java
  • input、textarea、div(contenteditable=true)光标定位到最后

    1、针对input、textarea

    //定位input、textarea
            function po_Last(obj) {
                obj.focus();//解决ff不获取焦点无法定位问题
                if (window.getSelection) {//ie11 10 9 ff safari
                    var max_Len=obj.value.length;//text字符数
                    obj.setSelectionRange(max_Len, max_Len);
                }
                else if (document.selection) {//ie10 9 8 7 6 5
                    var range = obj.createTextRange();//创建range
                    range.collapse(false);//光标移至最后
                    range.select();//避免产生空格
                }
            }
    

     

    2、针对div(contenteditable="true")

    //定位div(contenteditable = "true")
            function po_Last_Div(obj) {
                if (window.getSelection) {//ie11 10 9 ff safari
                    obj.focus(); //解决ff不获取焦点无法定位问题
                    var range = window.getSelection();//创建range
                    range.selectAllChildren(obj);//range 选择obj下所有子内容
                    range.collapseToEnd();//光标移至最后
                }
                else if (document.selection) {//ie10 9 8 7 6 5
                    var range = document.selection.createRange();//创建选择对象
                    //var range = document.body.createTextRange();
                    range.moveToElementText(obj);//range定位到obj
                    range.collapse(false);//光标移至最后
                    range.select();
                }
            }
    

      

        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
        <html xmlns="http://www.w3.org/1999/xhtml">  
        <head>  
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
        <title>div contenteditable光标测试</title>  
        <style type="text/css">  
            .div{ 600px; height:200px; border:1px solid #CCC}  
        </style>  
        <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>  
        <script type="text/javascript">  
            $(document).ready(function(e) {  
                $('.aclick').click(function(){  
                    $('.div').html("回复[潇sdfsdfssssssssssssssdfsdf潇]:");  
                    $('.div').focus(); 
                    po_Last_Div($('.div').get(0)); 
                })  
            });  
            
    
            function po_Last_Div(obj) {
                if (window.getSelection) {//ie11 10 9 ff safari
                    obj.focus(); //解决ff不获取焦点无法定位问题
                    var range = window.getSelection();//创建range
                    range.selectAllChildren(obj);//range 选择obj下所有子内容
                    range.collapseToEnd();//光标移至最后
                }
                else if (document.selection) {//ie10 9 8 7 6 5
                    var range = document.selection.createRange();//创建选择对象
                    //var range = document.body.createTextRange();
                    range.moveToElementText(obj);//range定位到obj
                    range.collapse(false);//光标移至最后
                    range.select();
                }
            }
        </script>  
        </head>  
          
        <body>  
    	<input type="text">
            <div  class="aclick">回复潇潇</div>  
            <div class="div" contenteditable="true">  
            </div>  
        </body>  
        </html>  
    

      

  • 相关阅读:
    计算机硬件发展史
    17.Java8新特性_传统时间格式化的线程安全问题
    13. Java8新特性_Stream API 练习
    12. Java8新特性_Stream_归约与收集
    11.Java8新特性_Stream_查找与匹配
    10.Java8新特性_Stream_排序
    9. Java8新特性_Stream_映射
    8. Java8新特性_Stream_筛选与切片
    CentOS 安装 Python3
    CentOS7安装图形桌面系统(GNOME / KDE / Cinnamon / MATE / Xfce)
  • 原文地址:https://www.cnblogs.com/ghfjj/p/8603295.html
Copyright © 2011-2022 走看看