how to make input adding fixed value in html-CodePudding

I want to make a input

<input type="text" id="AccountNumber" oninput="maxLengthCheck(this, 26)" name="AccountNumber" value="TR" />

my default value is "TR". I want the default value to remain constant. I want it not to be deleted and changed.

But i want to be able to enter variable after default value. for example 'TR1234567890'

How can i do that?

CodePudding user response：

.wrapper {
  position: relative;
}

.wrapper::before {
  content: 'TR - ';
  font-size: .8rem;
  position: absolute;
  top: 50%;
  left: 5px;
  transform: translate(0%, -50%);
  z-index: 9999;
}

.my-input {
  padding-left: 2rem;
}

<div >
  <input  value="">
</div>

this should be fine.

NB: dont forget to prepend 'TR' when you process your inputs

CodePudding user response：

Not so sure this will help or not.

    <!-- HTML -->
    <input type="text" id="accountNumber" oninput="maxLengthCheck(this, 26)" name="AccountNumber"  value="" />
    <p id="demo"></p>

    // Javascript
    let text = "TR";
    let newValue = document.getElementById("accountNumber");

    function maxLengthCheck(elem, x) {
      document.getElementById("demo").innerHTML = text   newValue.value;
      elem.setAttribute("size", x);
    }

CodePudding user response：

try this code. You just need to use JQUERY for it to work. With JQuery I detect when its value changes, if the first two positions are different from TR I concatenate the TR to the value of the input.

<div >
 <div >
  <label>TEST</label>
  <input type="text" id="yourInput" name="yourInput" value="TR"  required>
 </div>
</div>



<script>
    $('#yourInput').on('change', function(a) {
     var input = $(this).val();
     if (input.substr(0, 2) != 'TR') {
      $(this).val(`TR${input}`);
     }
    });
   </script>