CODEWITHSUNDEEP
javascriptasp.net
user2568960
user2568960

Reputation: 65

How to make textbox half readonly

I have a question about a textbox in asp.net. I have an text for example : P-70101002-00089-0, and I want that just this part : "70101002" to be readonly and the other part the users to have the ability to edit. The template is always the same just the numbers change. Is there any opportunity to make it with asp.net or any javascript? Thank you

Upvotes: 1

Views: 1436

Answers (3)

Ranielle Canlas
Ranielle Canlas

Reputation: 634

You can try Bootstrap with InputGroup

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<label for="basic-url">Your vanity URL</label>
<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="basic-addon3">P-70101002-</span>
  </div>
  <input type="text" class="form-control" value="00089-0" id="basic-url" aria-describedby="basic-addon3">
</div>

Upvotes: 0

Tarun Sharma
Tarun Sharma

Reputation: 552

we can make it using hidden input that we'll use to get read-only text 

function eidturl() {
  var readOnlyLength = $('#page_name_field_hidden').val().length;
  $('#page_name_field').on('keypress, keydown', function(event) {
    if ((event.which != 37 && (event.which != 39)) &&
      ((this.selectionStart < readOnlyLength) ||
        ((this.selectionStart == readOnlyLength) && (event.which == 8)))) {
      return false;
    }
  });
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="page_name_field" type="text" onclick="eidturl()" name="app_name" value="70101002" size="50" />
<input id="page_name_field_hidden" type="hidden" value="70101002" size="50" />

Upvotes: 0

Rahul Tripathi
Rahul Tripathi

Reputation: 172418

You can try like this:

var x  = $('#myId').val().length;
$('#myId').on('keypress, keydown', function(event) {    
    if ((event.which != 37 && (event.which != 39))
        && ((this.selectionStart < x)
        || ((this.selectionStart == x) && (event.which == 8)))) {
        return false;
    }
});

JSFIDDLE DEMO

Upvotes: 1

Related Questions