精华内容
下载资源
问答
  • js 是如何获取index的如下:

    千次阅读 2018-12-30 16:29:12
    var ul = document.getElementById("list"); var ul_child = ul.getElementsByTagName('li'); for (var i = 0; i < ul_child.length; i++) { ul_child[i].index = i; ...
    var ul = document.getElementById("list");
               var ul_child = ul.getElementsByTagName('li');
               for (var i = 0; i < ul_child.length; i++) {
                   ul_child[i].index = i;
                   ul_child[i].onclick = function(){
                       var j = this.index;
                        alert("元素索引为" +this.index);
    展开全文
  • js获取光标位置

    万次阅读 多人点赞 2017-11-13 13:21:14
    js获取光标位置1.概念和原理DOM中并没有直接获取光标位置的方法,那么我们只能间接来获取光标位置。DOM支持获取光标选中的范围,我们可以以此为切入点,来获取或定位光标的位置。当选取范围起始点和结束点一样时,...

    js获取光标位置

    1.概念和原理

    DOM中并没有直接获取光标位置的方法,那么我们只能间接来获取光标位置。DOM支持获取光标选中的范围,我们可以以此为切入点,来获取或定位光标的位置。当选取范围起始点和结束点一样时,就是光标插入的位置。

    1.1 术语

    anchor(瞄点):选区起点。

    focus(焦点):选区终点。

    range(范围):选区范围,包含整个节点或节点的一部分。

    1.2 Selection

    Selection:Selection对象表示用户选择的文本范围或插入符号的位置。

    经过实验发现Selection选取的节点范围都是块级节点。input和texteare并不能作为Selection的节点

    Selection对象存在于window对象上,可以通过window.getSelection()获取示例。

    属性:

    anchorNode:选区起点的节点。

    anchorOffset:选区的起点位置。

    focusNode:选区终点的节点。

    focusOffset:选区的终点位置。

    isCollapsed:起点和终点是否重叠。

    rangeCount:选区包含的range数目。

    方法

    getRangeAt(index):获取指定的选取范围。

    addRange(range):将一个范围添加到Selection对象中。

    removeRange():移出指定的范围。

    removeAllRanges():移出所有range对象。

    collapse(parentNode,offset):将光标移动到parentNode节点的offset位置。

    collapseToStart():取消当前选区,并把光标定位在原选区的最开始处,如果此时光标所处的位置是可编辑的,且它获得了焦点,则光标会在原地闪烁。

    collapseToEnd():取消当前选区,并将光标定位到原选取的最末位。如果此时光标所处的位置是可编辑的,且它获得了焦点,则光标会在原地闪烁。

    extend(node,offset):将终点位置移动到node节点的offset位置。

    modify(alter,direction,granularity):通过alter方式(move/extend)来改变光标位置,移动方向为direction(left/right),移动单位为granularity

    containsNode(aNode,aPartlyContained):判断aNode是否包含在Selection中。aPartlyContained为false表示全包含,为true表示只要部分包含即可。

    toString():放回当前Selection对象的字符串。

    1.3 Range

    Range对象表示一个Selection的选择范围,一个Selection可以包含多个Range

    获取对象

    document.createRange():创建一个Range。

    selection.getRangeAt(index):获取指定的Range。

    属性

    collapsed:判断起始位置是否重合。

    endContaniner:range终点节点。

    endOffset:range的终点位置。

    startContaniner:ranstartge起点节点。

    startOffset:range的起点位置。

    commonAncestorContainer:包含起始点的节点。

    方法

    setStart(startNode,startOffset):设置范围在startNode的起始位置为startOffset。

    setEnd(endNode,endOffset):设置范围在endNode的起始位置为endOffset。

    selectNode(referenceNode):设置range的节点为referenceNode。

    selectNodeContents(referenceNode):设置range的内容为referenceNode。

    collapse(toStart):向边界点折叠range,即是设置光标位置,toStart默认为false,表示光标定位在节点末尾。true表示光标定位在节点起点。

    cloneContents():克隆一个range的内容片段。

    deleteContents():删除range的内容片段。

    extractContents():将range的内容从文档树移动到文档片段中。

    insertNode(newNode):在range的其实位置插入新的节点。

    surroundContents(newNode):将range对象的内容移动到新的节点中。

    cloneRange():克隆一个range对象。

    detach():释放当前range。

    1.4 input/textarea

    在html5中,可输入性表单元素(input/textarea)都存在以下属性。不支持IE6/7。

    • selectionDirection:forward | backward | none,选区方向
    • selectionEnd:选区终点位置
    • selectionStart:选区起点位置

    setSelectionRange(selectionStart, selectionEnd, [selectionDirection]):设置获取焦点的输入性元素的选区范围。

    2.获取光标位置

    2.1 可编辑div获取光标位置

    //获取当前光标位置
    const getCursortPosition = function (element) {
      var caretOffset = 0;
      var doc = element.ownerDocument || element.document;
      var win = doc.defaultView || doc.parentWindow;
      var sel;
      if (typeof win.getSelection != "undefined") {//谷歌、火狐
        sel = win.getSelection();
        if (sel.rangeCount > 0) {//选中的区域
          var range = win.getSelection().getRangeAt(0);
          var preCaretRange = range.cloneRange();//克隆一个选中区域
          preCaretRange.selectNodeContents(element);//设置选中区域的节点内容为当前节点
          preCaretRange.setEnd(range.endContainer, range.endOffset);  //重置选中区域的结束位置
          caretOffset = preCaretRange.toString().length;
        }
      } else if ((sel = doc.selection) && sel.type != "Control") {//IE
        var textRange = sel.createRange();
        var preCaretTextRange = doc.body.createTextRange();
        preCaretTextRange.moveToElementText(element);
        preCaretTextRange.setEndPoint("EndToEnd", textRange);
        caretOffset = preCaretTextRange.text.length;
      }
      return caretOffset;
    }

    获取光标的位置是先通过获取鼠标的选取范围,然后克隆该选取范围,修改克隆范围的结束位置,这样克隆的范围就只剩下起点到结束点的内容,光标之后的内容被截取扔掉了。所以可以通过剩余内容的长度来确定光标位置。之所以要克隆一个选取范围出来,是为了避免修改光标结束位置时影响到原先内容。

    2.2 input/textarea获取光标位置

    //输入框获取光标
    const getPosition = function (element) {
        let cursorPos = 0;
        if (document.selection) {//IE
            var selectRange = document.selection.createRange();
            selectRange.moveStart('character', -element.value.length);
            cursorPos = selectRange.text.length;
        } else if (element.selectionStart || element.selectionStart == '0') {
            cursorPos = element.selectionStart;
        }
        return cursorPos;
    }

    3.设置光标位置

    3.1 可编辑div设置光标位置

    //设置光标位置
    const setCaretPosition = function (element, pos) {
      var range, selection;
      if (document.createRange)//Firefox, Chrome, Opera, Safari, IE 9+
      {
        range = document.createRange();//创建一个选中区域
        range.selectNodeContents(element);//选中节点的内容
        if(element.innerHTML.length > 0) {
          range.setStart(element.childNodes[0], pos); //设置光标起始为指定位置
        }
        range.collapse(true);       //设置选中区域为一个点
        selection = window.getSelection();//获取当前选中区域
        selection.removeAllRanges();//移出所有的选中范围
        selection.addRange(range);//添加新建的范围
      }
      else if (document.selection)//IE 8 and lower
      {
        range = document.body.createTextRange();//Create a range (a range is a like the selection but invisible)
        range.moveToElementText(element);//Select the entire contents of the element with the range
        range.collapse(false);//collapse the range to the end point. false means collapse to end rather than the start
        range.select();//Select the range (make it the visible selection
      }
    }

    3.2 input/textarea获取光标位置

    // 设置光标位置
    function setCaretPosition(textDom, pos){
        if(textDom.setSelectionRange) {
            // IE Support
            textDom.focus();
            textDom.setSelectionRange(pos, pos);
        }else if (textDom.createTextRange) {
            // Firefox support
            var range = textDom.createTextRange();
            range.collapse(true);
            range.moveEnd('character', pos);
            range.moveStart('character', pos);
            range.select();
        }
    }

    4.示例

    <html>
    
    <head>
      <title>光标测试</title>
      <style>
        p {
          display: flex;
          flex-direction: row;
        }
    
        .btn {
          height: 24px;
          margin: 0 10px;
        }
    
        .edit-div {
          display: inline-block;
          width: 225px;
          border: 1px solid #decdcd;
        }
      </style>
      <script>
    
        function getCursortPosition(e) {
          var eleP = e.target.parentNode; //获取父级元素
          var pos = 0;
          if (e.target.nodeName == "DIV") {
            pos = getDivPosition(e.target);
          } else {
            pos = getPosition(e.target);
          }
    
          var spanEle = (eleP.childNodes)[7];
          spanEle.innerText = pos;
        }
    
        //可编辑div获取坐标
        const getDivPosition = function (element) {
          var caretOffset = 0;
          var doc = element.ownerDocument || element.document;
          var win = doc.defaultView || doc.parentWindow;
          var sel;
          if (typeof win.getSelection != "undefined") {//谷歌、火狐
            sel = win.getSelection();
            if (sel.rangeCount > 0) {//选中的区域
              var range = win.getSelection().getRangeAt(0);
              var preCaretRange = range.cloneRange();//克隆一个选中区域
              preCaretRange.selectNodeContents(element);//设置选中区域的节点内容为当前节点
              preCaretRange.setEnd(range.endContainer, range.endOffset);  //重置选中区域的结束位置
              caretOffset = preCaretRange.toString().length;
            }
          } else if ((sel = doc.selection) && sel.type != "Control") {//IE
            var textRange = sel.createRange();
            var preCaretTextRange = doc.body.createTextRange();
            preCaretTextRange.moveToElementText(element);
            preCaretTextRange.setEndPoint("EndToEnd", textRange);
            caretOffset = preCaretTextRange.text.length;
          }
          return caretOffset;
        }
    
        //输入框获取光标
        const getPosition = function (element) {
          let cursorPos = 0;
          if (document.selection) {//IE
            var selectRange = document.selection.createRange();
            selectRange.moveStart('character', -element.value.length);
            cursorPos = selectRange.text.length;
          } else if (element.selectionStart || element.selectionStart == '0') {
            cursorPos = element.selectionStart;
          }
          return cursorPos;
        }
      </script>
    </head>
    
    <body>
      <p>
        <label>输入框测试:</label>
        <input type="text" style="width:220px" onclick="getCursortPosition(event);" />
        <span>光标位置:</span>
        <span></span>
      </p>
      <p>
        <label>文本框测试:</label>
        <textarea rows="5" style="width:220px" onclick="getCursortPosition(event);"></textarea>
        <span>光标位置:</span>
        <span></span>
      </p>
      <div>
        <label>可编辑div:</label>
        <div contenteditable="true" class="edit-div" onclick="getCursortPosition(event);"></div>
        <span>光标位置:</span>
        <span></span>
      </div>
    </body>
    
    </html>

    效果图:

    这里写图片描述

    展开全文
  • js中for of遍历数组获取index的方法

    千次阅读 2021-05-11 10:58:54
    of 遍历本身获取不了 index,可以先将Array 转成 Map,再用 for... of 遍历 let arr = [ 'a', 'b', 'c' ]; for( let [ index, item ] of new Map( arr.map( ( item, index ) => [ index, item ] ) ) ) { ...

    数组的 for... of 遍历本身获取不了 index,可以先将 Array 转成 Map,再用 for... of 遍历

    let arr = [ 'a', 'b', 'c' ];
     
    for( let [ index, item ] of new Map( arr.map( ( item, index ) => [ index, item ] ) ) ) {
     
        console.log( index, item );
     
    }

    得到

    0 "a"
    1 "b"
    2 "c"

    展开全文
  • 对于 “index.js不能获取app.js异步请求的动态数据” 这个问题,本人也是郁闷了好几分钟。 解决方法是:getApp().wxFunction().then(res =&gt; { }) 先展示一下开始错误的代码吧 app.js: globalData: { ...

    对于 “index.js不能获取app.js异步请求的动态数据” 这个问题,本人也是郁闷了好几分钟。

    解决方法是:getApp().wxFunction().then(res => { })

    先展示一下开始错误的代码吧

    app.js:

    globalData: {
      test: 1,
    },
    
    onLaunch(options) {
      console.log("onLaunch");
      wx.request({
        url: 'https://www.xxx.com/api/xxx/xxx',
        method: 'POST',
        data: {
          test: 1
        },
        header: {
          'content-type': 'application/x-www-form-urlencoded'
        },
        success: res => {
          console.log("request");
          that.globalData.test = 2;
        }
      })
    }

    index.js:

    onReady() {
      console.log("onReady")
      console.log(app.globalData.test);
    },

    打印结果:

    此时在index.js中app.globalData.test的值是1,再看看打印的顺序,很明显wx.request的异步请求在最后,所以在index.js中并不能获取到动态数据。

     

    接下来就是解决这个问题,这里我用的是Promise,再看看正确的代码

    app.js

    globalData: {
      test: 1
    },
    
    wxLogin() {
      let that = this;
      return new Promise((resolve, reject) => {
        wx.request({
          url: 'https://www.xxx.com/api/xxx/xxx',
          method: 'POST',
          data: {
            test: 1
          },
          header: {
            'content-type': 'application/x-www-form-urlencoded'
          },
          success: function () {
            that.globalData.test = 2;
          }
        })
      })
    },

    index.js:

    onReady() {
      // 这里的app已被定义 const app = getApp();
      app.wxLogin().then(res => {
        console.log(app.globalData.test);
      });
    },

    这时,app.globalData.test的值是2。

     

    展开全文
  • js获取js文件传入的参数

    千次阅读 2019-04-03 14:27:52
    有的时候我们在封装js的时候需要通过引入的js文件传递参数 <div id='d4'> <script src="./js/test.js?id=d4&type=visual&width=1000&height=800" id="testjs">...获取方法封装: fun...
  • js获取referer

    千次阅读 2020-07-24 09:22:25
    js获取referer,适用于Chrome,Firefox,IE等各种浏览器,javascript获取页面来源网址(即referer,当前页面的上一页页面地址). 注意,referer在PHP中是通过$_SERVER[‘HTTP_REFERER’]来获取的,而js中的referer拼写也不...
  • js获取url传值

    千次阅读 2018-05-21 09:12:24
    js获取url传值例如:https://www.baidu.com/?id=1231.方法1function GetRequest() { var url = location.search; //获取url中"?"符后的字串 var theRequest = new Object(); if(url.indexOf(&...
  • 微信小程序 获取手机号 JS

    万次阅读 多人点赞 2020-03-31 09:17:14
    当我们在开发微信小程序中,有一个常用的功能,就是获取用户的手机号,然后一键登入小程序,那么手机号如何获取呢?请认真看完本文,保证可以获取到用户的手机号。
  • function getMaxZIndex() { var maxZ = Math.max.apply(null, $.map($('body *'), function(e,n) { if ($(e).css('position') !... return parseInt($(e).css('z-index')) || -1; })); return maxZ; }
  • js 获取点击次数

    千次阅读 2020-10-15 18:44:06
    js 获取点击次数 var index = 0; $(".h63_pcbtn i").click(function(){ index++; console.log(index); } })
  • js获取字符串索引indexOf用法

    千次阅读 2019-05-30 15:57:54
    https://www.cnblogs.com/dyqblog/p/5431824.html
  • 获取当前月每天的日期,获取当前周每天的日期实现代码: 调用代码: console.log('-----------------', getNowM(), getWeekDay()) 结果:我今天是2020-2-28日 封装方法: function getDay(num, str) { var...
  • js获取js文件传递的参数

    千次阅读 2019-10-11 18:59:12
    在使用script标签将一个js文件引入到另一个前端页面时,遇到需要传递参数的情况,并且在被引入的js代码中需要对传递的参数进行获取。 传递参数的方法很简单,就是像访问URL地址一样在script标签的src属性中引入的...
  • 通常如果数据过多,我们会将数据单独拉出来存储到一个单独的js文件中,然后通过外部js引入进来使用数据。 目前比较简单而且用的比较多的是ES6语法规范的exports&import方法。 使用方法是: // 外部定义dataList....
  • 使用JS获取数组的索引值index

    万次阅读 2018-07-11 18:29:32
    var lis = getElementsByTagName("li"); for(var i=0;i&... lis[i].index = i;//赋予每个li索引值,这是难点,比较难理解! lis[i].onclick = function(){ alert(this.index); } }...
  • 原生js获取文件名

    千次阅读 2018-12-04 21:27:19
    原生js方法 我的信仰色: #5adcf6 (一) indexOf() indexOf()方法用于返回String对象内第一次出现子字符串的字符位置。如果没有找到,则返回-1。语法如下: string.indexOf(subString, ); subString:必选。要在...
  • js点击获取当前li标签的index

    万次阅读 2016-08-23 15:50:33
    你把js代码放到了头部,一定要记得加window.onload=function(){} 放到头部,不加这段代码的话会点击没有反应,或者直接报错: Uncaught TypeError: Cannot set property 'onclick' of null; 后来在 ...
  • 一、获取当前行的index:trRow.rowIndex;   二、表中插入行:var row=table.insertRow(index);   三、复制行:var copyRow=trRow.cloneNode(true);   四、在指定行前插入行:trRow.parentNode.insertBefore...
  • js获取get请求参数

    千次阅读 2019-07-01 15:16:11
    页面跳转时获取url问号后面带的参数 触发在html或者js中都可以 实施 js var $_GET = (function(){ var url = window.document.location.href.toString(); //获取的完整url var u = url.split("?"); if...
  • js获取baseurl

    千次阅读 2018-08-02 13:32:00
    /********获取basePath********/var curPath = window.document.location.href;var PERFIX;PERFIX = curPath.substring(0,curPath.indexOf("web")); 转载于:https://www.cnblogs.com/xxwtfw/p/9406640.html
  • js获取当前项目路径

    万次阅读 2019-04-18 17:50:26
    js获取当前项目路径 function getRootPath(){ //获取当前网址 var curWwwPath=window.document.location.href; //获取主机地址之后的目录 var pathName=window.document.location.pathname; var pos=curWwwPath....
  • js获取元素下标

    千次阅读 2018-06-01 09:17:15
    <!... <title></title> ...oP[i].index=i oP[i].onclick=function(){ console.log(i) //3 【for里面套函数,i为跳出循环的数】 alert(this.index) } } </html>
  • js获取网站绝对路径

    千次阅读 热门讨论 2015-11-08 21:50:20
    在jsp中我们可以使用${pageContext.request.contextPath}来获取网站根目录,从而得到绝对路径,但是今天在写js 的时候也需要获取网站根目录。 测试发现,如果把js直接写在jsp页面,${pageContext.request.context...
  • jsindex()方法,获取元素的下标失效,都是返回的0 大家应该都用过index(),去获取元素的下标 但是当我们用append方法取追加HTML片段之后,当我们去点击每个元素的时候, 返回的下标值都是0 在网上找了类似的问题,大致的...
  • js获取当前项目的根目录

    万次阅读 2015-06-12 09:49:31
    常用的路径获取方法如下:window.location.pathname:设置或获取对象指定的“文件名”或路径。 window.location.href:设置或获取整个 URL 为字符串。 window.location.port:设置或获取与 URL 关联的端口号码。 ...
  • js获取当前项目根路径URL

    千次阅读 2014-04-24 14:50:16
    1.js获取项目路径方法:/** * //获取当前项目根路径 * @return {TypeName} */ function getRootPath(){ //获取当前网址,如: http://localhost:8083/uimcardprj/share/meun.jsp var curWwwPath=window....
  • js获取项目根路径

    万次阅读 2015-01-05 14:46:11
    //js获取项目根路径,如: http://localhost:8083/uimcardprj function getRootPath(){ //获取当前网址,如: http://localhost:8083/uimcardprj/share/meun.jsp var curWwwPath=window.document.location.href...
  • js获取项目路径

    千次阅读 2018-11-16 19:43:34
    //获取项目路径  var curRequestPath = window.document.location.href;  console.log("curRequestPath:" + curRequestPath);  //获取项目请求路径 /people/toGetPeopleList.action  var pathName = ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 335,150
精华内容 134,060
关键字:

获取indexjs