部分只读文本框

Question

如何使用angularjs/HTML属性部分读取文本框？ 例如，默认值为“+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

基于尼廷的工作上面，我创建这个角度指令应该做的伎俩

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

希望这有助于

Answer 3

..只是因为你可以。这是另一种选择。

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> 

---

或

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> 

的[只读如何让只有在文本框中键入一些文字，同时允许其余