如何使用无法删除但允许用户在其后面的输入中写入的值初始化输入 [英] How to initialize a input with a value that can't be deleted but allow the user to write in the input after it

问题描述

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

I'm using Angularjs and bootstrap to create some forms and I want to initialize an input with a default value that can't be deleted.

我不想让输入只读或禁用它我想用一些无法删除的文本初始化输入但让用户在此之后写入文本。

I don't want to make the input readonly or disabled it I want to initialize the input with some text that can't be deleted but let the user write after this text.

示例

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

Code: xyz-whatever text the user want to write

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

I want that the user wouldn't be able to delete "xyz" but he can write after it.

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

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

EDIT The default value can't be deleted I mean the value must be undeletable , it must remain in the input field even if the user presses the delete key to delete. The "xyz-" text must remain permanently in the input, the user can only be able to delete the text that he wrote after the "xyz-"

推荐答案

您可以使用 defaultValue rel =nofollow> ngChange ：

You can simply check the defaultValue with ngChange:

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>

这篇关于如何使用无法删除但允许用户在其后面的输入中写入的值初始化输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！