部分只读文本框

Question

如何使用angularjs/HTML attribue部分只读文本框？例如,具有默认值的文本框说"+91",这是只读的,否则部分需要输入值.

Answer 1

HTML

<input id="field" type="text" value="+91" size="50" />

<div id="output">
</div>

使用Javascript

var readOnlyLength = $('#field').val().length;

 $('#output').text(readOnlyLength);

$('#field').on('keypress, keydown', function(event) {
    var $field = $(this);
    $('#output').text(event.which + '-' + this.selectionStart);
    if ((event.which != 37 && (event.which != 39))
        && ((this.selectionStart < readOnlyLength)
        || ((this.selectionStart == readOnlyLength) && (event.which == 8)))) {
        return false;
    }
});                    

演示http://jsfiddle.net/Yt72H/

Answer 2

基于Nitin的上述工作,我创建了这个角色指令,应该可以解决这个问题

的jsfiddle

http://jsfiddle.net/codemonkeytony/3ew5h6bf/7/

角

    var partialApp = angular.module("partialApp", []);

    partialApp.directive('partialReadonly', function () {
        return {
            restrict: 'A',
            link: function (scope, elem, attrs) {
                elem.on('keypress, keydown', function (event) {
                    var readOnlyLength = attrs["partialReadonly"].length;
                    if ((event.which != 37 && (event.which != 39))
                        && ((elem[0].selectionStart < readOnlyLength)
                        || ((elem[0].selectionStart == readOnlyLength) && (event.which == 8)))) {
                        event.preventDefault();
                    }
                });
                $(window).load(function () {
                    elem[0].value = attrs["partialReadonly"];
                });
            }
        };
    });

HTML

<input type="text" partial-readonly="Readonly text goes here"  />

希望这可以帮助