Partially read-only textbox

Question

How to make a text-box partially readonly using angularjs/HTML attribue? For example, a textbox having default value say "+91",which is readonly and else part need to enter values.

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;
    }
});                    

Demo http://jsfiddle.net/Yt72H/

Answer 2

Based on Nitin's work above I created this Angular Directive that should do the trick

JSFiddle

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

Angular

    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"  />

Hope this helps