Remove read-only attribute at focus auto-tab java script

Question

I have some sort of form, which prevent to fill the second input text before filling the first input, here is my code

function autotab(current,to){
        if (current.getAttribute && 
            current.value.length==current.getAttribute("maxlength")) {
              //to.removeAttr('readonly');
              to.focus();
              }
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="answers">
<input type="text" id="i1" name="i1" size=1 onKeyup="autotab(this, i2)" maxlength=1 autofocus><br>
<input type="text" id="i2" name="i2" size=1 onKeyup="autotab(this, i3)" maxlength=1 readonly><br>
<input type="text" id="i3" name="i3" size=1 onKeyup="autotab(this, i4)" maxlength=1 readonly><br>

what I really want is to remove readonly attribute, I'm using the to.removeAttr('readonly') but it show error Uncaught TypeError: to.removeAttr is not a function I already tried to use to.prop('readonly', false); but it doesn't change anything, any advice?

CertainPerformance · Accepted Answer · 2018-10-23T04:42:16.217

The vanilla Javascript method is called removeAttribute:

to.removeAttribute('readonly');

If you wanted to use removeAttr, you would have to convert the element to a jQuery collection first:

function autotab(current, to) {
  if (current.getAttribute &&
    current.value.length == current.getAttribute("maxlength")) {
    $(to).removeAttr('readonly');
    to.focus();
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="answers">
  <input type="text" id="i1" name="i1" size=1 onKeyup="autotab(this, i2)" maxlength=1 autofocus><br>
  <input type="text" id="i2" name="i2" size=1 onKeyup="autotab(this, i3)" maxlength=1 readonly><br>
  <input type="text" id="i3" name="i3" size=1 onKeyup="autotab(this, i4)" maxlength=1 readonly><br>

You're also relying on i2 and so on referring to the elements in the inline handlers. Better not to rely on that (see this question for details) - better to select the elements explicitly instead, and to assign the handlers properly using Javascript (inline handlers are generally considered to be pretty poor practice). Here's one possible way of refactoring it:

const answers = document.querySelector('.answers');
answers.addEventListener('keyup', ({ target }) => {
  if (target.value.length != target.getAttribute('maxlength')) return;
  const next = target.nextElementSibling;
  if (!next) return;
  next.removeAttribute('readonly');
  next.focus();
});

input {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="answers">
  <input type="text" id="i1" name="i1" size=1 maxlength=1 autofocus>
  <input type="text" id="i2" name="i2" size=1 maxlength=1 readonly>
  <input type="text" id="i3" name="i3" size=1 maxlength=1 readonly>

thanks for the advice, I also just know the difference removeAttr and removeAttribute — unknown.person, Oct 23 '18 at 04:54

score 1 · Answer 2 · answered Oct 23 '18 at 04:40

to is a DOM object. Wrap it into $() will fix your issue:

function autotab(current,to){
        if (current.getAttribute && 
            current.value.length==current.getAttribute("maxlength")) {
              $(to).removeAttr('readonly');
              to.focus();
              }
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="answers">
<input type="text" id="i1" name="i1" size=1 onKeyup="autotab(this, i2)" maxlength=1 autofocus><br>
<input type="text" id="i2" name="i2" size=1 onKeyup="autotab(this, i3)" maxlength=1 readonly><br>
<input type="text" id="i3" name="i3" size=1 onKeyup="autotab(this, i4)" maxlength=1 readonly><br>

Remove read-only attribute at focus auto-tab java script

2 Answers2