部分只读文本框答案

【问题标题】：Partially read-only textbox部分只读文本框
【发布时间】：2014-11-23 10:06:18
【问题描述】：

如何使用 angularjs/HTML 属性使文本框部分只读？例如，具有默认值的文本框说“+91”，这是只读的，其他部分需要输入值。

【问题讨论】：

How to make only some text in a text-box read-only while allowing the rest to be edited的可能重复

【解决方案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/

【讨论】：

【解决方案2】：

根据上面 Nitin 的工作，我创建了这个 Angular 指令，应该可以解决问题

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

希望对你有帮助

【讨论】：

Angular 4 中是否有类似的实现？

【解决方案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>

【讨论】：