How to initialize a input with a value that can’t be deleted but allow the user to write in the input after it

Question

396.14K viewsSeptember 16, 2022angularjs html javascript twitter-bootstrap twitter-bootstrap-3

2

Bill_Data23 September 13, 2022 0 Comments

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.

Example

Code: xyz-whatever text the user want to write

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>

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-“

2 Answers

score 0 · Answer 1 · 2022-09-13T06:13:19+00:00

This would be tricky to do with JS as you need to do some cursor position tracking, masking and all that additional logic.

Why not fake it and make a div look like an input, with the prefix text as a label on the left? and a borderless input on the right?

.fake-input{
  border: 1px solid #333;
  padding: 0.5rem;
  font-family: sans-serif;
  font-size: 1rem;
}

.fake-input__input{
  border: 0; 
  outline: 0;
  font-family: sans-serif;
  font-size: 1rem;
  padding-left: 0;
  padding-right: 0;
}

<div class="fake-input">
  <label class="fake-input__label" for="fake-input__input-1">xyz-</label>
  <input type="text" class="fake-input__input" id="fake-input__input-1">
</div>

score 0 · Answer 2 · 2022-09-13T04:21:40+00:00

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>