169it科技资讯
169it -->


当前位置:  编程技术>jquery

jquery实现文本框倒序输入的例子

    来源: 互联网  发布时间:2014-10-09

文本框倒序输入是指输入框的焦点始终在最开始的位置,例如当输入123456789时,在输入框上显示的是987654321。

项目需求是两个输入框,一个正序输入,另一个倒序输入。

文本倒序输入:
只要保证输入框的焦点始终在第一位,即可以实现每次输入的都在最前面,即倒序。

代码:
 

代码示例:
function setPosition(ctrl, pos) { //设置光标位置函数
if (ctrl.setSelectionRange) {
ctrl.focus();
ctrl.setSelectionRange(pos, pos);
} else if (ctrl.createTextRange) {
var range = ctrl.createTextRange(); //创建一个选择区域
range.collapse(true); //将光标移动到选择区域的开始位置
range.moveEnd('character', pos); //改变选择区域结束的位置
range.moveStart('character', pos); //改变选择区域开始的位置
range.select(); //将选择的内容同步到当前的对象
}
}
 

只要将参数pos设为0就可以了。

例子,实现正常删除和倒序输入。
 

代码示例:

<!DOCTYPE html>
<html>
<head>
<title>jquery实现倒序输入_www.yuju100.com</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<style>
.content {
width: 300px;margin:0 auto;margin-top:50px;
}
ul {
list-style: none;
}
.elem {
width: 200px;
}

</style>
<script src="http://cdn.staticfile.org/jquery/2.1.1-rc2/jquery.min.js"></script>
</head>
<body>
<div >
<ul>
<li>
<input type="text" >
</li>
<li>
<input type="text" >
</li>
<li>
<input type="text" >
</li>
</ul>
</div>
<script>
function setPosition(ctrl, pos) { //设置光标位置函数
if (ctrl.setSelectionRange) {
ctrl.focus();
ctrl.setSelectionRange(pos, pos);
} else if (ctrl.createTextRange) {
var range = ctrl.createTextRange(); //创建一个选择区域
range.collapse(true); //将光标移动到选择区域的开始位置
range.moveEnd('character', pos); //改变选择区域结束的位置
range.moveStart('character', pos); //改变选择区域开始的位置
range.select(); //将选择的内容同步到当前的对象
}
}
$('.elem').on('keypress keyup', function() {
if(event.keyCode === 8)
return;
setPosition(this,0);
});
</script>
</body>
</html>

另外,在附上相关的获取焦点位置的函数,可能会用到:
 

代码示例:
function getPosition(ctrl) {
// IE Support
var CaretPos = 0;
if (document.selection) {
ctrl.focus();
var Sel = document.selection.createRange();
Sel.moveStart('character', -ctrl.value.length);
CaretPos = Sel.text.length;
}
// Firefox support
else if (ctrl.selectionStart || ctrl.selectionStart == '0')
CaretPos = ctrl.selectionStart;
return (CaretPos);
}
 

总结:
实现了设置和获取文本输入焦点,我就可以做一些其他的特效,比如删除一整个单词或者变量等。


    
相关技术文章:
    ▪jquery淡入淡出效果原理分析

     用jquery实现淡入淡出效果,为了达到更为生动的效果,可以把一个元素淡出或淡入,在任何一种情况下,都只是随着时间来改变元素的透明度。 jquery提供了3个和淡入淡出相关的函数: ·fadein()使得一个隐藏的元素淡入视野。 首先,元素占据的空间出现在页面上(这可能意味着页面上的其他元素要移走); 然后,元素逐渐地变得可见。如果元素在页面上已经可见,则这个函数没有任何效果。如果没有提供一个速度值,元素使用“常规”设置来淡入(400毫秒)。 ·fadeOut()通过使得一个可视的元素像幽灵般地淡出视线来隐藏它。如果元素在页面上已经隐藏......


    ▪jquery图片淡入淡出效果的简单示例

     jquery控制图片淡入淡出效果,很经典的一款转场或图片切换特效,这里分享下jquery实现的图片淡入淡出效果的一段代码,一起学习下。 例子:   代码示例: <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>jquery控制图片淡入淡出效果--www.</title> <script src="/ajaxjs/jquery1.3.2.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> ul li{position:absolute;left:50px;top:20px;} .onoe{display:none;} </style> </head> <b......


    ▪jquery背景图淡入淡出效果示例代码

     先来看下背景图淡入淡出的原理: 通过一个两张不同的图片,两个不同的层重叠在一起,顶层暂时透明,当鼠标移上去时,顶层由透明变成不透明,鼠标离开反之。 下面来看jquery实现背景图片淡入淡出效果的具体例子,一起学习下。 1,html部分:   代码示例: <a id="logo" href=""> <span>语句百分网</span></a> 2,css代码:   代码示例: #logo{   margin:0 auto;   position:relative;/*相对定位,为了下面hover的绝......


 
最新技术文章:
    ▪jquery怎么限制文本框只能输入数字?

     如何用jquery 限制文本框只能输入数字呢?   先来看一个简单的例子:    代码示例: $("input[name='fangwenyudinhuishu']").keyup(function(){       var tmptxt=$(this).val();       $(this).val(tmptxt.replace(/\D|^0/g,''));     }).bind("paste",function(){       var tmptxt=$(this).val();       $(this).val(tmptxt.replace(/\D|^0/g,''));     }).css("ime-mode", "disabled");    以上是keyup事件处理,接着处理了CTR+V事件,最后是css设置输入法不可用。 例子,用jquery限制文本框只能输入数字:(......


    ▪jquery显示与隐藏div的方法示例

     例子,显示与隐藏div。   $("#top_notice").css("display", "block");//第1种方法  //$("#top_notice").attr("style", "display:block;");//第2种方法  //$("#top_notice").show();//第3种方法  以下是一些显示与隐藏div,给元素设置style属性的方法。   1,给元素换class,来实现隐藏div,前提是换的class样式定义好了隐藏属性   $("#sendPhoneNum").attr("class", "n_input3");  2,给元素设置style属性   $("#top_notice").attr("style", "display:block;");    3,通过jquery的css方法,设置div隐藏   $("#sendPhoneNum").c......


    ▪jquery怎么获取div的id值?

     例子,jquery获得div的id。   <div id="product_shift_out_{m}"> </div>  <script language = "JavaScript" type="text/javascript">  $(document).ready(function(){  name = $('div').eq(0).attr('id');  alert(name)  });  </script> eq(0)是取第一个jq元素。   eq(index) 匹配一个给定索引值的元素 -------------- Matches a single element by its index. 返回值 Element 参数 index (Number) : 从 0 开始计数 例子,查找第二行。   <table> <tr><td>Header 1</td></tr> <tr><td>Va......


 


站内导航:


特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

©2012-2017,169IT.COM,E-mail:www_169it_com#163.com(请将#改为@)

浙ICP备11055608号