javascript - 如何使用无法删除的值初始化输入，但允许用户在输入后写入

Question

我正在使用 Angularjs 和 bootstrap 创建一些表单，我想使用无法删除的默认值来初始化输入。

我不想将输入设置为只读或禁用它，我想使用一些无法删除的文本来初始化输入，但让用户在此文本后写入。

示例

代码:xyz-用户想要写入的任何文本

我希望用户无法删除“xyz”，但他可以在之后写入它。

<input class="form-control" placeholder="write the code" 
                                   name="code"
                                   ng-model="proyect.code"
                                   required>

编辑默认值不能删除我的意思是该值必须是不可删除的，即使用户按删除键删除它也必须保留在输入字段中。 “xyz-”文本必须永久保留在输入中，用户只能删除他在“xyz-”之后编写的文本

Answer 1

您只需使用 ngChange 检查 defaultValue :

angular
    .module('MyApp', [])
    .controller('MyController', function($scope) {
        var defaultValue = 'xyz-';
        
        $scope.proyect = {};
        $scope.proyect.code = defaultValue;
        $scope.checkDefaultValue = function() {
            if (!$scope.proyect.code || defaultValue !== $scope.proyect.code.substring(0, 4)) {
                $scope.proyect.code = defaultValue;
            }
        };
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="MyApp" ng-controller="MyController">
    <input class="form-control" 
           placeholder="write the code"
           name="code"
           ng-change="checkDefaultValue()"
           ng-model="proyect.code"
           required>
</div>