Read-only partial text field

Question

How to make a text box partially readonly using angularjs / HTML attributes? For example, a text field with a default value means "+91", which is readonly, and the other part should 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 which 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

Answer 3

.. just because you can. Here is another option.

http://jsfiddle.net/davidcondrey/jhncLhL9/1/embedded/result/

 textarea { display:inline-block;float:left;outline:0;margin:0;padding:0;resize:none; } textarea:first-of-type { border:1px solid #000;border-right:0;} textarea:last-of-type { border-left:0; } <form> <fieldset> <textarea readonly="readonly" cols="2" rows="1">+91 changed</textarea> <textarea class="var" cols="20" rows="1">Enter value here</textarea> </fieldset> </form> 

---

or

http://jsfiddle.net/davidcondrey/955z0sc4/embedded/result/

 input { text-indent:30px; } input + span:before { position:absolute;color:#000; content:'91';left:35px;top:20px; } <form> <fieldset> <input class="var"/><span></span> </fieldset> </form>