js控制input框内光标地方,控制input输入框光标的职务

By admin in 4858美高梅 on 2019年4月12日

格局一:使用CSS溢出省略的法子化解

难题讲述

前段时间遭受3个须要:在表单中有3个字段叫金额,用户期待点击该输入框后(focus),能够活动为其金额数字后增进“万元”四个字。

尽管那几个须求能够因而任何的统一筹划格局躲避(例如在文本框后进入“万元”等),可是,既然境遇了难点,肯定依然期待能够研商一下技艺化解情势。

对这几个必要开始展览抽象,其实需求形成的天职便是:通过js来控制输入框内光标的地方。要做到这些职分,供给介绍一个input成分的主意:
HTMLInputElement.setSelectionRange()

壹:精通input, textarea成分在标准浏览器下两个性子selectionStart,
selectionEnd。

 CSS是HTML成分的剪刀手,它Infiniti的增进了web页面包车型客车修饰。在重重CSS常见的体制供给中,有壹奇葩式的存在【垂直居中】,因为随便是从逻辑实现地点也许从常规须求量来讲,那都没理由让那个要求在实践进度中,显的那么困难。大家1再须要极度添加标签元素与充斥hack味道的习性才能一挥而就,而在关乎到不定点成分尺寸的时候,更显勤奋。唉,日子还得如故过,工作还得继续干,那里就从事实上须求的角度来综合壹些纯CSS方案。【尤其表明,现实中的供给云谲波诡,请阅者依据实际供给】

缓解效益如下:

setSelectionRange

selectionStart: 该属性的含义是 选区初始的岗位;
selectionEnd: 选区甘休的职位。
三个值暗许都以为0。
注意:
该属性在chrome,safari和firefox都有用,标准浏览器下利用这八个属性。
咱俩先来探望如下代码,打字与印刷下如下可以见见:

 

4858美高梅 1

介绍

在MDN上得以找到setSelectionRange()的合法介绍。其官方表明如下:

The HTMLInputElement.setSelectionRange() method sets the start and end
positions of the current text selection in an <input> element.

翻译过来就是:首先,setSelectionRange()方法是法力在input成分上的,其次,这一个主意能够为最近因素内的文件设置备选中范围(selection)。简单的话,正是能够透过安装开首于终止地方,来选中1段文本中的一部分。值得说的是,在新版中,该办法还收受2个可选参数,这一个参数钦点的挑三拣肆的可行性。

<!DOCTYPE html>
     <html>
        <head>
          <meta charset="utf-8">
          <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
          <title>标题</title>
        </head>
        <body>
          <input id="inputId" type="text" oninput="inputFunc()" onkeyup="keyupFunc()"/>
          <textarea id="textareaId" oninput="textareaFunc()"></textarea>
          <script>
            var inputId = document.getElementById("inputId");
            console.log(inputId.value);
            console.log(inputId.selectionStart);
            console.log(inputId.selectionEnd);

            function inputFunc() {
              console.log(inputId.value);
              console.log(inputId.selectionStart);
              console.log(inputId.selectionEnd);
            }
            function textareaFunc() {
              var textareaId = document.getElementById('textareaId');
              console.log(textareaId.selectionStart);
              console.log(textareaId.selectionEnd)
            }
          </script>
        </body>
    </html>

文件内容的垂直居中那是多少个烂大街的必要,比如在页面中某壹块内容的标题上和单行列表上就会有用到。如下图:

js控制input框内光标地方,控制input输入框光标的职务。css代码:

动用方法

其应用办法如下:

inputElement.setSelectionRange(selectionStart, selectionEnd, [optional] selectionDirection);
  • selectionStart:第壹个被入选的字符的序号(index),从0先河。
  • selectionEnd:被选中的终极三个字符的前二个。换句换说,不包含index为selectionEnd的字符。
  • selectionDirection:选拔的大势。可选值为forward、backward或none。

来做1个不难易行的实例(在线浏览),当选中八个文本框时,文本框内的文字将会被入选。可以采用点击(click)输入框的艺术,也得以运用tab切换大旨的不2秘籍,其服从如下:

4858美高梅 2

效果图

福寿齐天代码如下
备考:本文中事件监听未采纳非凡写法,读者可自行补全

<form>
  <label>这个input在focus时,内部文本会被选中</label>
  <input id="test" placeholder="万元" value="这是一段测试文本">
</form>

body {
  background-color: #f6f6f6;
}

form {
  padding: 30px;
}

input {
  display: block;
  margin-top: 10px;
  padding: 10px;
  font-size: 15px;
  color: #333333;
  border: 1px solid #555555;
  border-radius: 5px;
}

document.getElementById('test').addEventListener('focus', function() {
  changeCursorPos('test');
});

function changeCursorPos(inputId, pos) {
  var inpObj = document.getElementById(inputId);
  if (inpObj.setSelectionRange) {
    inpObj.setSelectionRange(0, inpObj.value.length);
  }
}

里面最根本的一对是

inpObj.setSelectionRange(0, inpObj.value.length);

那段代码会从第叁个字符初步,到最终1个字符甘休,选中输入框内的具备内容。

查阅效果

4858美高梅 3

            display: -webkit-box;
            display: -moz-box;
            white-space: pre-wrap;
            word-wrap: break-word;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-box-orient: vertical;
            -webkit-line-clamp:2;   /*显示行数*/

兼容性

那么,这么些艺术的兼容性怎样啊?

Feature Chrome Edge Firefox(Gecko) Internet Explorer Opera Safari
Basic support 1.0 (Yes) 1.0 (1.7 or earlier) 9 8.0 (Yes)
selectionDirection 15 (Yes) 8.0 (8.0) ? ? (Yes)

能够看到,对于大旨的作用,主流浏览器的常用版本(及以上)都有着较好的帮衬,而selectionDirection作为附加作用,纵然包容性一般,不过不会潜移默化对于该方法的使用。因而,能够在一定的风貌下得以放心使用setSelectionRange()

地方几个脾气都代表了 选中区域的左右境界。暗许值都以为0,当我们采用focus()方法时,暗中认可的光标在文本框的发端地方。大家得以如下设置该属性值如下:

以后我们就假使必要在1个宽400px,高3二px的div上,使个中的一条龙文字垂直居中,首要职能如下图:

 

控制光标地点

input.selectionStart = 0; // 选中区域左边界
input.selectionEnd = input.value.length; // 选中区域的右边界

4858美高梅 4

艺术二:使用jQuery截取替换文本内容的点子缓解

初步测试

如上介绍了inputElement.setSelectionRange()的意思与应用格局,不过,我的靶子须求是决定输入框内的光标位置,而不是选中输入框内的1部分文件。所以,下面介绍的那些和自笔者的靶子必要有关系么?
有。
回来上有的的实例代码,我们能够将主要代码进行一定的改动

inpObj.setSelectionRange(0, inpObj.value.length-1);//修改了selectionEnd的值

修改之后的结果如下

4858美高梅 5

此间写图片描述

能够一目领会看到,选普通话本区域改变了。那么更进一步问本身一个标题,此时的光标实际停留的职位在哪——“文”字背后。由此,简单察觉,代码成功将相应处于文本末端(”本”字背后)的光标,移动至了其前3个字符“文”的后方。通过安装分裂的selection,js能够成功将光标设置在差别的字符后方(其实是selection选区的后方)。
有了这一个结论,可以更进一步预计,假设将选区的限制设置为0,那么则不会有文字被入选,同时,还是能控制光标的所处地点。明显,这些便是力所能及满足自身要求的点。
为了测试那些作用,作者写了三个总结的事例。

代码如下

<form>
  <label>这个input在focus时,光标会移动至文本的开头处</label><input id="test" placeholder="万元" value="这是一段测试文本">
</form>

body {
  background-color: #f6f6f6;
}

form {
  padding: 30px;
}

input {
  display: block;
  margin-top: 10px;
  padding: 10px;
  font-size: 15px;
  color: #333333;
  border: 1px solid #555555;
  border-radius: 5px;
}

document.getElementById('test').addEventListener('focus', function() {
  changeCursorPos('test')
});

function changeCursorPos(inputId, pos) {
  var inpObj = document.getElementById(inputId);
  if (inpObj.setSelectionRange) {
    inpObj.setSelectionRange(0, 0);
  }
}

测试浏览器firefox(chrome请使用tab来切换主题,具体原因后半片段会特别解释)。完成结果与预期一致,光标被一定在了文本的最前方。

上边包车型客车代码能够选中输入框的全体内容, 等同于input.select();
那正是说大家如何获取选中的文本内容吧?我们得以采用substring方法截取字符串;比如如下代码:
var text = input.value.substring(input.selectionStart,
input.selectionEnd);

譬如说如下demo,页面上暗许有三个输入框,然后输入框暗中认可有值,然后经过地点四个属性selectionStart,selectionEnd
来选汉语本,然后通过substring方法输出input的文件。如下代码:

福寿双全地点须要的HTML代码如下:

消除效益如下:

实现

<form>
  <label>自动添加“万元”单位的input</label>
  <input id="money" name="money" placeholder="万元">
</form>

body {
  background-color: #f6f6f6;
}

form {
  padding: 30px;
}

input {
  display: block;
  margin-top: 10px;
  padding: 10px;
  font-size: 15px;
  color: #333333;
  border: 1px solid #555555;
  border-radius: 5px;
}

document.getElementById('money').addEventListener('focus', function(e) {
  e.preventDefault();
  var val = this.value,
    len = val.length;
  if (val.indexOf('万元') !== -1) {
    pos = len - 2;
    changeCursorPos('money', pos);
  } else {
    $(this).val(val + '万元');
    pos = len;
    changeCursorPos('money', pos);
  }
});

function changeCursorPos(inputId, pos) {
  var inpObj = document.getElementById(inputId);
  if (inpObj.setSelectionRange) {
    inpObj.setSelectionRange(pos, pos);
  } else {
    console.log('不兼容该方法');
  }
}
<!DOCTYPE html>
   <html>
      <head>
        <meta charset="utf-8">
        <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
        <title>标题</title>
      </head>
      <body>
        <input id="inputId" type="text" value="aaabbbbccccdddd"/>

        <script>
          var inputId = document.getElementById('inputId');
          inputId.selectionStart = 2;
          inputId.selectionEnd = inputId.value.length;
          var text = inputId.value.substring(inputId.selectionStart, inputId.selectionEnd);
          alert(text); // 从第三个字符开始 因此输出 abbbbccccdddd

        </script>
      </body>
  </html>
<div class="box">标题标题</div>

4858美高梅 6

BUG fix

辩白上来说,小编早已成功了对象供给,在firefox下点击输入框或用tab、chrome下利用tab都得以完结效益。可是,作者在上头也论及了,chrome中,只好使用tab,借使你用点击输入框的章程举办测试,会发现,这些法子失效了,光标还是处在文本的结尾。
致使那么些题材的原故是chrome存在的1个bug:setSelectionRange() for
input/textarea during onFocus fails when mouse
clicks
其一bug就好像是由于chrome中暗许的事件处理顺序引起的,有人提到

WebKit and Blink handle tasks for mousedown in the following order:

  1. Focus
  2. Selection
    The order looks reversed in other browsers

chrome暗中同意的selection操作将会覆盖focus中的js操作代码。为了消除这些标题,第一个想到的正是挡住浏览器私下认可行为

e.prevenDefault();
//return false;

只是,尝试之后发现,阻止浏览器暗中同意行为在那些标题上并不见效。供给寻求别的艺术。

查阅效果 

CSS完成的代码如下:

 js代码:

初期的解决方法

解决这么些题材的率先个思路正是,将changeCursorPos()以此办法的运维时间推移,最棒能够在浏览器默许行为现在。这么些达成非阻塞有异曲同工之处,因而,能够行使定时器setTimeout来改变其在队列中的顺序

setTimeout(function(){
    changeCursorPos('money', pos);
}, 0);

针对那一个改变,只供给将原js代码中的

changeCursorPos('money', pos);

全总交换为

setTimeout(function(){
    changeCursorPos('money', pos);
}, 0);

其成效可以在线旁观

只是,笔者在测试时意识,那个法子存在以下多个关键难题:

  • 效果较差。光标会先居于文本尾巴部分,在跳至文本开始,对用户显示不谐和。
  • 失效。更关键的难点是,固然使用setTimeout也不能够保证将changeCursorPos操作末了执行,能够窥见,在测试中,时常会冒出其失效的情事。

就此我们得以对规范浏览器下
对光标地点举办安装,比如页面初步化的时候,大家得以安装光标的职位:如下代码:

.box{
    width: 400px; 
    background-color: #ccc; 
    color: #333;
    line-height:32px;  /*主要实现代码*/
}
    $(".text").each(function() {
        if ($(this).text().length > 20) {//要求字数大于20才进行字数替换
            $(this).html($(this).text().replace(/\s+/g, "").substr(0, 80) + "...")
            //从0到80开始替换,将剩余文本内容替换为"..."
        }
    })

缓解失效难点

要消除失效难题,其实就是要力保将changeCursorPos的执行顺序添加至最终。须要掌握,在鼠标点击与tab切换时,那八个操作之间的分别。

在tab切换时,相当于调用了inputElement.focus(),也许纯粹地说,在使用setSelectionRange()时两者的操作结果一致。而当使用鼠标点击选取输入框时,不仅会接触focus监听,还会触发一个click监听,而且通过测试能够发现,click事件触发晚于focus事件。

因此,如果在click监听中也助长changeCursorPos操作,就足以确认保障该操作不会被chrome的暗中认可行为覆盖掉。

html与css不变,js代码如下

//为input添加一个click监听,保证changeCursorPos在chrome默认focus事件之后执行
document.getElementById('money').addEventListener('click', function(e) {
  var val = this.value;
  var len = val.length;
  if (val.indexOf('万元') !== -1) {
    pos = len - 2;
    setTimeout(function() {
      changeCursorPos('money', pos);
    }, 0);
  }
  else {
    $(this).val(val + '万元');
    pos = len;
    setTimeout(function() {
      changeCursorPos('money', pos);
    }, 0);
  }
});

//保留focus监听,确保tab的正确使用
document.getElementById('money').addEventListener('focus', function(e) {
  var val = this.value;
  var len = val.length;
  if (val.indexOf('万元') !== -1) {
    pos = len - 2;
    setTimeout(function() {
      changeCursorPos('money', pos);
    }, 0);
  } else {
    $(this).val(val + '万元');
    pos = len;
    setTimeout(function() {
      changeCursorPos('money', pos);
    }, 0);
  }
});

function changeCursorPos(inputId, pos) {
  var inpObj = document.getElementById(inputId);
  if (inpObj.setSelectionRange) {
    inpObj.setSelectionRange(pos, pos);
  } else {
    console.log('不兼容该方法');
  }
}

点击查阅实例

只是,再来看看后边蒙受的四个难题:

  • 效益较差。光标会先居于文本后面部分,在跳至文本初始,对用户展示不和谐。
  • 失效。更首要的标题是,即使采用setTimeout也不能担保将changeCursorPos操作最后执行,能够窥见,在测试中,时常会现出其失效的情景。

看得出,上壹些代码已经缓解了失效的标题,保险了效果的达成。然则,那些方案还不完善,其效果差的题材依然没有缓解。由此,还索要找三个更完善的达成方案。

input.selectionStart = 1;  // 选中区域的左边界
input.selectionEnd = input.value.length - 1; // 选中区域的右边界

福寿无疆地方的需要,我们还足以用内填充来消除。可是用那个法子得事先了然大家先行的css
reset也许浏览器对页面设置的暗中同意行高是稍稍。假使为24px,那么大家把3二px中度减去暗中认可行高的贰四px,然后除以二收获4px,然后用内填充填上,所以我们得以改成这么:

上述三种方法效果在文件内容的类名即可。

提起底的消除方案

末尾的解决方案的思路如下:

  1. 通过文书档案的按键监听来判断是行使tab操作仍旧鼠标点击操作,并安装标志位
  2. 当触发focus监听时,判断操作情势,要是focus事件的根源为tab操作则转执行changeCursorPos,不然使其错过大旨
  3. 在click监听中手动触发focus事件,并将安装标志,模拟tab行为

代码如下

<form>
  <label>解决chrome中点击input的bug的方案</label>
  <input id="exception" placeholder="exception">
  <input id="money" name="money" placeholder="万元">
</form>

body {
  background-color: #f6f6f6;
}

form {
  padding: 30px;
}

input {
    display: block;
    margin-top: 10px;
    padding: 10px;
    font-size: 15px;
    color: #333333;
    border: 1px solid #555555;
    border-radius: 5px;
  }

var tab = false;
document.addEventListener('keydown', function(e) {
  if (e.keyCode == 9) {
    tab = true;
  }
});
document.getElementById('exception').addEventListener('focus', function() {
  tab = false;
});
document.getElementById('money').addEventListener('click', function() {
  tab = true;
  this.focus();
});

document.getElementById('money').addEventListener('focus', function() {
  if (tab) {
    var val = this.value,
      len = val.length;
    if (val.indexOf('万元') !== -1) {
      pos = len - 2;
      setTimeout(function() {
        changeCursorPos('money', pos);
      }, 0);
    } else {
      $(this).val(val + '万元');
      pos = len;
      setTimeout(function() {
        changeCursorPos('money', pos);
      }, 0);
    }
  } else {
    this.blur();
  }
  tab = false;
});

function changeCursorPos(inputId, pos) {
  var inpObj = document.getElementById(inputId);
  if (inpObj.setSelectionRange) {
    inpObj.setSelectionRange(pos, pos);
  } else {
    console.log('不兼容该方法');
  }
}

在线演示

能够见见,在示范代码中,使用了tab变量作为标志,代码复用性较低,不太好,在实质上项目中能够利用部分闭包或模块格局来拓展处理,做成一个进一步通用的职能。此处一得之见,首若是显得达成的笔触。

如上代码,在页面起先化的时候 能够设置光标的任务。

.box{
    width: 400px; 
    background-color: #ccc; 
    color: #333;
    padding: 4px 0;  /*主要实现代码*/
}

  

总结

setSelectionRange()方法能够协助大家很不难的选普通话本中的某一片段剧情。同时,活用该情势也得以完成设置光标地方的作用。可是,chrome中设有的三个小bug导致该作用在鼠标点击时失效。文中研讨了修复该bug的壹些主意。可是作为抛砖引用,依旧盼望更加多方便与缓解方案。

IE浏览器下哪些兑现的吧?
IE浏览器下创建3个文本选择对象,使用 createTextRange()方法;如下代码:

 那样麻烦是劳动了点,但总消除了难题。

var range = input.createTextRange();

供给是永无穷境的,上边是落到实处了单行的公文难题,即使咱们要实现多行文本的剧情的垂直居中该咋做吧?如下图,三个宽400px,高300px的div:

地点的这些选区对象暗中认可包涵了input的一体文书内容。不过该选区对象的始末并不会当选。因而须求调用
select()方法;如下代码:
range.select();
笔者们也得以采取 range.text属性获得中选的文字。
对于业内浏览器下得以选取selectionStart和selectionEnd属性的办法获得选区的初叶位置和终止地点,那么对于IE浏览器下能够利用
moveStart和moveEnd方法。

4858美高梅 7

贰:精晓 IE浏览器下的 moveStart 和 moveEnd 方法

上边完毕的HTML代码如下:

那七个方法的选区对象涵盖input的万事文书内容,所以它的左左边际就是文件的起来和完工地点。

<div class="box">
    <p>标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题</p>
</div>

moveStart形式的意义是: 用来移动左侧界。如下代码:

 

rangeObj.moveStart("character", 2); // 最左边界右移2个字符
rangeObj.select(); // 将range包含的区域选中

您早晚想到了用内填充来解决那一个题材,毕竟是永恒中度的(代码就不依附了),可是壹旦大家内部的始末再多扩大一行,或许减去壹行,那种艺术就没用了。那时,我们就足以行使table的表征来缓解;

4858美高梅,上边四个章程都亟待传入八个参数,第2个参数的可选值有
character(根据字符来偏移), word, sentence, textedit,
第一个参数代表偏移的有些,正负表示方向。
左边界最初暗许为0,左边界默许是文本内容的尺寸值。

    .box{
        height:300px; 
        width: 400px; 
        background-color: #ccc; 
        color: #333; 
        display: table; /*设置父标签为table展示*/
    }
    .box > p{
        display: table-cell;/*设置子标签为表格的单元格*/
        vertical-align: middle;/*设置子标签单元格展现内容方式*/
    }

注意:rangeObj.select() 方法, 该措施是把range对象中的内容选中;

那种措施是在IE柒以及以下是从未有过用的,因为它们不帮衬标签转变为table的变动,即
display: table; 与display:
table-cell;当然你能够直接用表格布局,这无所谓。还好聪明人很多,大家前端的前辈们研讨了其它壹种情势来促成上述剧情,但html结构有变化,具体如下:

三:理解setSelectionRange

<!--html代码-->
<div class="box">
    <div>
        <div><p>标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题</p></div>
    </div>
</div>
<!--css代码-->
<style>
    .box{
        width: 400px;
        height: 300px;
        position: relative;
        background-color: #ccc; 
        color: #333; 
    }
    .box > div{
        position: absolute;
        top: 50%;
        left: 0;
    }
    .box > div > div{
        position: relative;
        top: -50%;
        left: 0;
    }
</style>    

该办法能够驾驭为input成分的办法:
HTMLInputElement.setSelectionRange();
该措施的功用是:能够为当下成分内的公文设置选中范围。一言以蔽之,能够经过设置伊始于终止地点,来选中壹段文本中的1部分。使用方法如下:
inputElement.setSelectionRange(selectionStart, selectionEnd,
[selectionDirection]);

参数的意思如下:
selectionStart: 第二个被入选的字符的序号(index), 从0起始的。
selectionEnd: 被选中的最后二个字符的
selectionDirection: 采取的取向,可选值为 forward, backward, 或 none.

那只适用IE七及以下,随着浏览器的穿梭进步,大家兴许不供给协作这么低版本的浏览器,当做壹种领会吗。

咱俩上面来做一个demo,当鼠标focus
input框的时候,文本的情节会被选中,如下代码演示一下:

像上面包车型大巴选拔table的性状来布局,里面包车型地铁内容是回顾div和图纸的。那一个能够团结试试,放入固定高宽的块级成分和图片。(注意一点,p标签里面放入div,在壹些浏览器中实际上彰显中会把p标签分割成七个,所以你能够把子成分改成div) 

<!DOCTYPE html>
  <html>
      <head>
        <meta charset="utf-8">
        <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
        <title>标题</title>
      </head>
      <body>
        <input id="inputId" type="text" value="这是一段测试文本"/>

        <script>
          var inputId = document.getElementById('inputId');
          inputId.addEventListener('focus', function() {
            if(inputId.setSelectionRange) {
              inputId.setSelectionRange(0, inputId.value.length);
            }
          });
        </script>
      </body>
  </html>

而只要单单你只想图片的垂直居中,你能够应用如下的点子:

查阅效果

<!--html代码-->
<div class="box1">
    <img src="xxxxx.png">
</div>
<!--css代码-->
<style>
    .box1{
        background-color: #ccc;
        line-height: 300px;
        width: 400px;
    }
    .box1 > img{vertical-align: middle;}
</style>

该措施的在浏览器下的包容性如下

实效要雅观呢。

属性                    chrome           firefox       IE     opera      safari
setSelectionRange       1.0              1.0          9       8.0        支持
selectionDirection      15               8.0                             支持

上述都以文件内容的垂直居中,可是大家平日做事中用的多的还有此外一种情状,即盒子居中,即div居中。如下图,下图是叁个div,宽400px,高300px:

貌似情况下,主流浏览器都帮助的,对于selectionDirection该属性,包容性即便不是很好,可是不应该该方法的施用。

4858美高梅 8

操纵光标地方

精明能干如你,一定会用到了table来缓解。那也是一种缓解方案,大家还是能用定位来消除办法,如:

怎么通过该措施来支配input标签的光标地点吗?比如在页面开头化的时候,我想私下认可选中部分文本,怎样支配?
上边大家来持续做一个demo,通过点击(focus事件),来选中input值(除了第二个字符和最后多个字符),其余的字符都入选,代码改成如下:
inputId.setSelectionRange(1, inputId.value.length – 2);
具备代码如下:

.box{
        height:300px; 
        width: 400px; 
        background-color: #ccc; 
        color: #333; 
        position: absolute;/*这里也可以使用fixed,看自己情况而定*/
        top: 50%;
        left: 50%;
        margin:-150px 0 0 -200px;
    }
<!DOCTYPE html>
  <html>
      <head>
        <meta charset="utf-8">
        <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
        <title>标题</title>
      </head>
      <body>
        <input id="inputId" type="text" value="这是一段测试文本"/>

        <script>
          var inputId = document.getElementById('inputId');
          inputId.addEventListener('focus', function() {
            if(inputId.setSelectionRange) {
              inputId.setSelectionRange(1, inputId.value.length - 2);
            }
          });
        </script>
      </body>
  </html>

抑或您也可以应用上边包车型地铁代码

翻看效果 

/*代码不适用与IE7及以下*/
.box{
        height:300px; 
        width:400px; 
        background-color: #ccc; 
        color: #333; 
        position: fixed;/*这里也可以使用fixed,看自己情况而定*/
        top:0;
        left:0;
        bottom:0;
        right:0;
        margin:auto;
    }

经过地点的底子知识点,大家能够做如下的demo
JS获取文本核心光标地方,选中发轫地点,终止地方和 选中剧情的demo;

上述措施都供给1个固定的中度的,假设们不分明内容的莫斯中国科学技术大学学该怎么落到实处啊?利用方面包车型客车table是足以办到的,假如你的门类并非包容不支持CSS三的浏览器话,能够试试以下的办法:

代码如下:

.box{
        width:200px; 
        background-color: #ccc; 
        color: #333; 
        position: fixed;/*可以切换为absolute*/
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
<!DOCTYPE html>
  <html>
      <head>
        <meta charset="utf-8">
        <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
        <title>标题</title>
      </head>
      <body>
        <p>
          <label>点击文本框内容触发事件</label>
          <input type="text" id="txt" value="abcdefghijklmn" onclick="getSelectPosition(this);">
        </p>
        <p>
          <label>焦点位置:</label>
          <input type="text" id="txt1" value="">
        </p>
        <p>
          <label>选中起始位置:</label>
          <input type="text" id="txt2" value="">
          <label>选中结束位置:</label>
          <input type="text" id="txt3" value="">
        </p>
        <p>
          <label>选中内容:</label>
          <input type="text" id="txt4" value="">
        </p>
        <script>
          function getSelectPosition($this) {
            var input1 = document.getElementById("txt1");
            var input2 = document.getElementById("txt2");
            var input3 = document.getElementById("txt3");
            var input4 = document.getElementById("txt4");

            var emptyValue = -1;
            var selectStart;
            var selectEnd;
            var pos;
            var selectText;
            if ($this.setSelectionRange) {
              // 标准浏览器
              selectStart = $this.selectionStart;
              selectEnd = $this.selectionEnd;
              if (selectStart == selectEnd) {
                pos = selectStart;
                selectStart = emptyValue;
                selectEnd = emptyValue;
              } else {
                pos = emptyValue;
              }
              selectText = $this.value.substring(selectStart,selectEnd);
            } else {
              // IE浏览器
              var range = document.selection.createRange();
              selectText = range.text;
              range.moveStart("character",-$this.value.length);
              pos = range.text.length;
              selectStart = pos - (selectText.length);
              selectEnd = selectStart + (selectText.length);

              if(selectStart != selectEnd){
                pos = emptyValue;
              }else{
                selectStart = emptyValue;
                selectEnd = emptyValue;
              }
            }
            input1.value = pos;
            input2.value = selectStart;
            input3.value = selectEnd;
            input4.value = selectText;
          }
        </script>
      </body>
  </html>

既然您的门类这么超前,我们也足以动用flexbox(伸缩盒)来布局,使用这种措施大家是足以绝不钦命宽度的,,代码如下:

翻看效果

    body {
    display: flex;
    min-height: 100vh;
    margin: 0;
    }
    .box {
    background-color: #ccc;
        margin: auto 20px;
    } 

input 输入框按键盘上键的时候
光标会先到后边去,然后跳到背后来的消除方案如下:

总计:这么多的主意都不是那么完美的,具体情状具体而定吧,听说CSS发展到今后,会平素用二个本性align-self:
center;来解决全数因素的垂直居中,期待那天的赶来吗。

keydown+e.preventDefault(阻止默许事件)的操作来解决;如下代码:

 

<!DOCTYPE html>
   <html>
      <head>
        <meta charset="utf-8">
        <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
        <title>标题</title>
      </head>
      <body>
        <input id="inputId" type="text" value="键盘箭头上下移"/>
        <script>
          var inputId = document.getElementById('inputId');
          inputId.addEventListener('keyup', function(e) {

          });
          inputId.addEventListener('keydown', function(e) {
            e.preventDefault();
          });
        </script>
      </body>
  </html>

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有