焦点自动标签Java脚本中删除只读属性

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?

Answer 1

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> 

Answer 2

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>