jQuery实现当文字过多时，完成输入后（失去焦点），显示输入的前面的文字，隐藏后面的文字
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery实现当文字过多时，完成输入后（失去焦点），显示输入的前面的文字，隐藏后面的文字相关的知识，希望对你有一定的参考价值。
与百度搜索条一样。
当输入的文字过多时：
，
当搜索条失去焦点时：
即显示最先输入的部分，
当搜索条再次获得焦点时：
光标位于最后输入的地方并且选中这些文字。
这样的功能怎么实现？
要么选中（光标在前）。
下面附带测试代码：
<!DOCTYPE html>
<html>
<head>
<title>AAA</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-CN" />
</head>
<body>
<script type="text/javascript" src="http://www.zjmainstay.cn/jquery/jquery-1.8.2.min.js"></script>
<input type="text" size="10" id="test" value="01234567890123456789" />
<script type="text/javascript">
$.fn.setCursorPosition = function(position)
if(this.lengh == 0) return this;
return $(this).setSelection(position, position);
$.fn.setSelection = function(selectionStart, selectionEnd)
if(this.lengh == 0) return this;
input = this[0];
if (input.createTextRange)
var range = input.createTextRange();
range.collapse(true);
range.moveEnd('character', selectionEnd);
range.moveStart('character', selectionStart);
range.select();
else if (input.setSelectionRange)
input.focus();
input.setSelectionRange(selectionStart, selectionEnd);
return this;
$.fn.focusEnd = function()
this.setCursorPosition(this.val().length);
return this;
$(document).ready(function()
$("#test").blur( function()
$(this).setSelection(0,0);
);
$("#test").focus( function()
$(this).focusEnd();
//$(this).select();
);
);
</script>
</body>
</html>追问
你的这个代码，我测试了一下，发现点击输入框输入文字后，不能点击其他东西了，焦点一直在输入框那里
追答什么叫不能点击其他东西？
追问比如，可以在你的代码后面加：，如果点击了你的输入框，那么就不能点击id为"input1"的输入框。你可以试试，焦点会一直在你的输入框内的
追答这个简单，因为$("#test").blur里面做了position的移位处理后，没有再blur掉，所以，改进处理下就行了。
改动一部分，如下：
$(document).ready(function()
$("#test").blur( function()
//如果已经失去焦点重置位置再调用失去焦点，直接返回
if($(this).hasClass("blur")) return false;
//添加失去焦点重置位置标记
$(this).setSelection(0,0).addClass("blur").blur();
);
$("#test").focus( function()
//移除失去焦点重置位置标记
$(this).focusEnd().removeClass("blur");
);
); 参考技术B <input id="input1" type="text" value="123456789789" >
<script>
var inp=$("#input1")
inp.on('click',function()
inp.select();
);
</script>追问
第二个条件没有达到，即当输入框失去焦点时，输入框显示最先输入的文字（文字过多超过输入框显示的情况下）
追答第二个是浏览器的默认行为，不需要自己设置的，你用的什么浏览器，截图来看下
追问我用的是IE9测试。确实是你说的那样，在360中可以实现了。如果我想要大部分浏览器都想360那样，应该怎么办？
我输入的是66666666699999999999333333333
当失去焦点时，
，并没有显示最先输入的部分
你的这个截图应该是百度的浏览器插件吧，不是百度的搜索框追问
不是这样的哦，input不设置的话，输入的时候确实是那样的，可是失去焦点时显示的是最后输入的部分，并且用光标调整查看文字的情况下，失去焦点时显示的是当时看到的文字部分。另外，这个只是一个例子，说明这三种情况。我想要的是实现这三种情况的功能，在大部分浏览器上。
input文本框获取焦点和失去焦点事件判断
onBlur:当输入框失去焦点后
onFocus:当输入框获得焦点后
这两个JavaScript事件是写在html标签中的例如：
<input type="text" onBlur=" " onFocus=" " />
使用jQuery的实现方法为：
对于元素的焦点事件，我们可以使用jQuery的焦点函数focus(),blur()。
focus()：得到焦点时使用，blur()：失去焦点时使用。
代码如下:
同样可以使用jQuery中提供的:focus伪类来判定元素是否获取焦点；
// Get the focused element: var $focused = $(‘:focus‘); // No jQuery: var focused = document.activeElement; // Does the element have focus: var hasFocus = $(‘input‘).is(‘:focus‘); // No jQuery: elem === elem.ownerDocument.activeElement;
下面写一个实例：
<!DOCTYPE HTML> <HTML> <HEAD> <TITLE> New Document </TITLE> </HEAD> <style> .bor{ border:3px solid red; } </style> <BODY> <input type="text"/> <script type="text/javascript" src="jquery-1.11.3.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("input").focus(function(){ $(this).addClass("bor"); }); $("input").blur(function(){ $(this).removeClass("bor"); }); }); </script> </BODY> </HTML>
当然还可以根据获取元素的状态修改其他元素的各项属性，或者是需要发生的事件
以上是关于jQuery实现当文字过多时，完成输入后（失去焦点），显示输入的前面的文字，隐藏后面的文字的主要内容，如果未能解决你的问题，请参考以下文章
axure7.0如何实现光标在文本框中获得焦点时，文本框内容自动清空。失去焦点时显示默认文字，谢谢！
用jquery怎么实现点击密码输入框，上面的提示文字“请输入密码”消失，失去焦点时候提示文字又存在
用jquery怎么验证名字在输入完之后马上提示有没有重复的代码