澳门威利斯人_威利斯人娱乐「手机版」

来自 网络资讯 2019-05-03 23:22 的文章
当前位置: 澳门威利斯人 > 网络资讯 > 正文

控制input输入框光标的位置,html文本溢出显示省

情势一:使用CSS溢出省略的章程消除

难点讲述

本月遭受3个供给:在表单中有二个字段叫金额,用户期望点击该输入框后(focus),能够活动为其金额数字后增加“万元”四个字。

纵然那个必要能够经过别的的规划艺术规避(比方在文本框后进入“万元”等),可是,既然遭遇了难点,确定依然愿意能够斟酌一下本领消除方法。

对这些供给实行抽象,其实须要落成的职务正是:通过js来决定输入框内光标的岗位。要做到这些职务,须要介绍2个input成分的艺术:
HTMLInputElement.setSelectionRange()

1:精晓input, textarea成分在标准浏览器下八个属性selectionStart, selectionEnd。

化解成效如下:

setSelectionRange

selectionStart: 该属性的含义是 选区开始的职位;
selectionEnd: 选区甘休的岗位。
五个值默许都感觉0。
注意: 该属性在chrome,safari和firefox都有用,标准浏览器下接纳那两本性格。
笔者们先来探视如下代码,打字与印刷下如下能够看来:

图片 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)。简单的话,便是足以经过设置起先于终止地点,来选中一段文本中的一有些。值得壹提的是,在新版中,该情势还收受三个可选参数,那个参数钦命的挑选的动向。

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

css代码:

采纳办法

其选用格局如下:

inputElement.setSelectionRange(selectionStart, selectionEnd, [optional] selectionDirection);
  • selectionStart:第贰个被入选的字符的序号(index),从0开头。
  • selectionEnd:被选中的尾声三个字符的前3个。换句换说,不包含index为selectionEnd的字符。
  • selectionDirection:选用的动向。可选值为forward、backward或none。

来做叁个归纳的实例(在线浏览),当选中贰个文本框时,文本框内的文字将会被入选。能够使用点击(click)输入框的点子,也得以应用tab切换核心的主意,其功用如下:

图片 2

效果图

兑今世码如下
备考:本文中事件监听未利用12分写法,读者可自动补全

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

那段代码会从第三个字符早先,到最终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()方法时,暗中认可的光标在文本框的启幕地方。大家能够如下设置该属性值如下:

 

垄断(monopoly)光标地点

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

艺术贰:使用jQuery截取替换文本内容的方式化解

始于测试

上述介绍了inputElement.setSelectionRange()的含义与行使方法,然则,笔者的对象需假如决定输入框内的光标地方,而不是选中输入框内的有的文件。所以,上边介绍的这个和本人的对象须要有关系么?
有。
归来上有的的实例代码,大家得以将第叁代码举办一定的修改

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

修改以后的结果如下

图片 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,页面上暗中同意有1个输入框,然后输入框暗中同意有值,然后经过地点七个脾性selectionStart,selectionEnd 来选普通话本,然后通过substring方法输出input的公文。如下代码:

化解功效如下:

实现

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

图片 4

BUG fix

辩解上的话,作者曾经做到了目标供给,在firefox下点击输入框或用tab、chrome下使用tab都得以兑现效益。可是,笔者在上头也关乎了,chrome中,只好选拔tab,如若您用点击输入框的主意进行测试,会发觉,这一个主意失效了,光标还是居于文本的最终。
导致这几个难题的来头是chrome存在的二个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;

但是,尝试之后察觉,阻止浏览器暗中同意行为在那么些主题素材上并不见效。需求寻求别的格局。

查阅效果 

 js代码:

早期的缓和措施

化解这几个标题标率先个思路便是,将changeCursorPos()本条方法的开发银行时间推迟,最棒能够在浏览器暗中认可行为之后。那个达成非阻塞有不期而同之处,由此,能够利用电火花计时器setTimeout来改造其在队列中的顺序

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

本着那一个改换,只须求将原js代码中的

changeCursorPos('money', pos);

整整轮换为

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

其功能能够在线收看

可是,笔者在测试时开掘,那一个艺术存在以下八个基本点难题:

  • 功效较差。光标会先居于文本尾巴部分,在跳至文本初阶,对用户体现不本身。
  • 失效。更重要的标题是,固然使用setTimeout也无法担保将changeCursorPos操作最终实行,可以窥见,在测试中,时常会油不过生其失效的状态。

于是大家能够对行业内部浏览器下 对光标地方进行设置,比方页面初叶化的时候,我们得以安装光标的职位:如下代码:

    $(".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; // 选中区域的右边界

上述二种办法效果在文件内容的类名就能够。

最终的消除方案

终极的化解方案的思路如下:

  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变量作为标记,代码复用性非常低,不太好,在骨子里项目中可以运用部分闭包或模块格局来进展管理,做成2个更为通用的成效。此处一得之见,首假如显得落成的思绪。

如上代码,在页面起先化的时候 能够安装光标的职务。

  

总结

setSelectionRange()措施能够帮助大家很轻巧的选中文本中的某1局地剧情。同时,活用该办法也能够实现设置光标地方的功用。不过,chrome中留存的3个小bug导致该意义在鼠标点击时失效。文中商量了修复该bug的1部分措施。不过作为抛砖引用,依然盼望愈来愈多方便与化解方案。

IE浏览器下什么样贯彻的吧?
IE浏览器下创办3个文书采纳对象,使用 createTextRange()方法;如下代码:

var range = input.createTextRange();

本文由澳门威利斯人发布于网络资讯,转载请注明出处:控制input输入框光标的位置,html文本溢出显示省

关键词: 澳门威利斯人 web前端 Web前端之路 让前端飞 HTM