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;
            }
        };
    });

<scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script><divng-app="MyApp"ng-controller="MyController"><inputclass="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;
}

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