How To Initialize A Input With A Value That Can't Be Deleted But Allow The User To Write In The Input After It

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 dis

Solution 1:

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>

Solution 2:

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>