Javascript 使用AngularJS在输入中设置插入符号位置

我需要更改输入的插入符号位置，其中添加了给定数量的数字（）

有可能这样做吗

例如，我需要：

输入：1234

因此插入符号位置将为2

新数字：9

决赛：12934

---

提前感谢。

我相信您可以通过在输入中使用

.setSelectionRange（）

来实现这一点。我更新了您的示例-看看这是否是您想要的：

---

注意：

setSelectionRange

不受IE8支持（请参阅），因此如果您需要支持IE<9，您需要寻找垫片。

我认为这种情况在指令中看起来更好。例如：

app.directive('caret', function() {

    function setCaretPosition(elem, caretPos) {
        if (elem !== null) {
            if (elem.createTextRange) {
                var range = elem.createTextRange();
                range.move('character', caretPos);
                range.select();
            } else {
                if (elem.setSelectionRange) {
                    elem.focus();
                    elem.setSelectionRange(caretPos, caretPos);
                } else
                    elem.focus();
            }
        }
    }

    return {
        scope: {value: '=ngModel'},
        link: function(scope, element, attrs) {
            var caret = Number(attrs.caret);
            scope.$watch('value', function(newValue, oldValue) {
                if (newValue && newValue != oldValue && !isNaN(newValue) && newValue.length > (caret + 1)) {
                    setCaretPosition(element[0], caret);
                }
            });
        }
    };
});

用法：

<input ng-model='val' caret="2" />

我使用了

setCaretPosition

函数从answer跨浏览器定位光标

---

Demo:我认为最好的方法是在处理DOM操作时生成一个可重用的指令

链接到演示：

---

您可以在控制器中注释掉的部分中看到，我们可以使用$element访问它，但是由于这是DOM，并且控制器不用于DOM操作，我们需要将其变成一个指令。

我也有同样的问题

我想创建一个合适的指令来解决这个问题。你可以找到它。享受吧

用法 Include指令，通过

caret-aware

属性声明

<script src="https://cdn.rawgit.com/leodido/ng-caret-aware/master/caretaware.min.js"></script>
<script type="text/javascript">
  var app = angular.module('myModule', ['leodido.caretAware']);
</script>
...
<div data-ng-app="app">
    <input type="text" name="myname" caret-aware="cursor"/>
</div>

var app=angular.module（'myModule'，['leodo.caretAware']）；
...

然后在作用域上有一个变量

cursor

，其中包含插入符号在名为

myname

的输入中的位置

然而，该指令的控制器公开了一个API

• getPosition

• setPosition

有关其他使用示例，请参阅上面链接的github存储库的目录。

I工作解决方案。 因此，基本上，您必须创建一个指令：

app.directive('keypressdetector', function($compile){
    return {
    restrict:'AEC',
    link: function(scope, element, attrs){
        element.bind("keypress", function (event) {
            if(event.which === 13) {
                            var selectionStart = element[0].selectionStart;
              var value = element.val();
              var valueLength = value.length;
              var newValue= '';
              if (selectionStart == valueLength){
                newValue = value;
              } else {
                newValue = value.substring(selectionStart, valueLength);
              }
              var newElement = angular.element('<input type="text" value="' + newValue +'"/>')
              angular.element(document.body).append(newElement);
            }
        });
    }
  };
});

app.directive（'keypressdetector'，函数（$compile）{
返回{
限制：'AEC'，
链接：函数（范围、元素、属性）{
元素绑定（“按键”，函数（事件）{
if（event.which==13）{
var selectionStart=元素[0]。selectionStart；
var value=element.val（）；
var valueLength=value.length；
var newValue=''；
如果（selectionStart==valueLength）{
newValue=值；
}否则{
newValue=value.substring（selectionStart，valueLength）；
}
var newElement=angular.element（“”）
元素（document.body）.append（newElement）；
}
});
}
};
});

在那种情况下，你的控制器是无用的。 您可以这样调用指令（请参阅：keypressdetector）：

你好{{user.firstName}
{{login}

---

这是我想要的。如何在其他输入中重用同一指令？(). 当光标返回到下一个输入时被重定向。

<script src="https://cdn.rawgit.com/leodido/ng-caret-aware/master/caretaware.min.js"></script>
<script type="text/javascript">
  var app = angular.module('myModule', ['leodido.caretAware']);
</script>
...
<div data-ng-app="app">
    <input type="text" name="myname" caret-aware="cursor"/>
</div>

app.directive('keypressdetector', function($compile){
    return {
    restrict:'AEC',
    link: function(scope, element, attrs){
        element.bind("keypress", function (event) {
            if(event.which === 13) {
                            var selectionStart = element[0].selectionStart;
              var value = element.val();
              var valueLength = value.length;
              var newValue= '';
              if (selectionStart == valueLength){
                newValue = value;
              } else {
                newValue = value.substring(selectionStart, valueLength);
              }
              var newElement = angular.element('<input type="text" value="' + newValue +'"/>')
              angular.element(document.body).append(newElement);
            }
        });
    }
  };
});

<div ng-app="myapp">
<div ng-controller="LoginController">
    <div>Hello {{ user.firstName }}</div>
    <input ng-model="user.firstName" keypressdetector />
    <input type="submit" ng-click="login()" value="Login"/>
    <div ng-repeat="login in logins">{{ login }}</div>
</div>
</div>