input 输入框如何实现当光标聚焦时部分文字被选中

码上中国博客 发布于 2015/05/19 09:04
阅读 3K+
收藏 1

我想实现以下的功能,如果html中的input标签中有如下的值时,当我的点击这个input中的某个字母时,和这个临近的字母被全选(遇到空格就不再选中),例如,我点击下面的这个input中的a时,它会把mail选中,而不会选中其他的字符,求大神如何设计js代码?


加载中
0
名字不能超过十个字
名字不能超过十个字

<input id="i" type="text" value="One two three">

$(document).ready(function(){

	$("#i").on("click",function(){
		var input = document.getElementById("i"),val = input.value;
		var click_position = getPosition(input);
		
		var start = val.lastIndexOf(" ",click_position);
		if(start == -1) start = 0;
		var end = val.indexOf(" ",click_position);
		if(end == -1) end = val.length;
	
		setSelection(input,start,end);
	});

	
	function setSelection(input, startPos, endPos) {
        input.focus();
        if (typeof input.selectionStart != "undefined") {
            input.selectionStart = startPos;
            input.selectionEnd = endPos;
        } else if (document.selection && document.selection.createRange) {
            input.select();
            var range = document.selection.createRange();
            range.collapse(true);
            range.moveEnd("character", endPos);
            range.moveStart("character", startPos);
            range.select();
        }
    }
	function getPosition (input) {
  var pos = 0;
  if (document.selection) {
    input.focus ();
    var selection = document.selection.createRange ();
    selection.moveStart ('character', -input.value.length);
    pos = selection.text.length;
  }
  else if (input.selectionStart || input.selectionStart == '0')
    pos = input.selectionStart;
  return pos;
}
	
})



http://runjs.cn/detail/tlwxeg2p




0
gogojxj
gogojxj
首先用focus事件,然后对input标签用..selectionStart和...selectionEnd就ok了...这两可以让你设定input里面字符的位置,,,,开始到结束
返回顶部
顶部