文本框倒叙输入让输入框的焦点始终在最开始的位置
所谓的文本框倒叙输入是指输入框的焦点始终在最开始的位置，如图所示，当我输入123456789时，在输入框上显示的是987654321。
为什么要做这个Demo？是因为在项目中遇到了，项目需求是两个输入框，一个正序输入，另一个倒叙输入。 下面我把实现的思路和代码写出来。
文本倒叙输入：
只要我们保证输入框的焦点始终在第一位，这样的话就可以实现每次我们输入的都在最前面，即倒叙
代码：
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就可以了。
下面是一个完整的Demo，这个Demo实现了正常删除和倒叙输入。
<!DOCTYPE html>
<html>
<head>
<title></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 style="">
<ul>
<li>
<input type="text" class="elem">
</li>
<li>
<input type="text" class="elem">
</li>
<li>
<input type="text" class="elem">
</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);
}
总结：
实现了设置和获取文本输入焦点，我们就可以做一些其他的特效，比如删除一整个单词或者变量等等。
如果你有关于此文的好想法，可以@me，希望此文能够帮助你！
-
我在服务器端ti get post变量中编写了一个php代码。
-
问题内容： 我有文字输入。当输入获得焦点时，我想选择输入内的文本。 使用jQuery，我可以这样： 我四处搜寻以尝试找到Angular方式，但是我发现的大多数示例都在处理一个指令，该指令正在监视模式属性的更改。我假设我需要一个指令来监视接收焦点的输入。我该怎么办？ 问题答案： 在Angular中执行此操作的方法是创建一个自定义指令，该指令会为您自动选择。 应用如下指令： Update1 ：删除了j
-
本文向大家介绍javascript文本框内输入文字倒计数的方法，包括了javascript文本框内输入文字倒计数的方法的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了javascript文本框内输入文字倒计数的方法。分享给大家供大家参考。具体实现方法如下： 希望本文所述对大家的javascript程序设计有所帮助。
-
主要内容：创建文本域,TextField文本,示例-1,实例-2,实例-3用于单行文本输入。请看下面的示例 - 和字段扩展了类，它是JavaFX中所有文本控件的超类。 上面的代码生成以下结果。 创建文本域 我们可以使用类的构造函数来创建文本字段。 只是一个带有光标的文本输入框，通常我们需要一个控件来告诉文本字段的目的。以下代码创建一个控件来标记对应的文本字段是用于名称输入。然后它创建一个对象。之后，它使用HBox布局和。 使用预定义文本创建文本字段。 TextField
-
在上一节我们讲到了 TextView，它用来显示一段文本。这一节可以算作成是 TextView 的延续，因为从功能上 EditText 在 TextView 的基础之上多了一个输入的功能；从代码上 EditText 是继承自 TextView 的子类，所以我们可以大胆的理解为， EditText 是一种带有输入功能的高级 TextView。 1. EditText 的特性 在学习过 TextVie
-
文本输入框和文本输入域使用标准的html标记的，然后Jquery Mobile会让他们变得更吸引人而且易于触摸使用 要使用输入标准文字的输入框，给input增加type="text"属性。注意要把label的for属性设为input的id值，使他们能够在语义上相关联，并且要用div容器包裹它们，并给他设定data-role="fieldcontain"属性 HTML 代码: <div data-r