The code is structured such that the html input field shows if a select value on change equals a value as preferred and it works fine. The challenge is that the text field shown does not accept any input values on smaller devices
How can I make this work?
HTML
<div class="col-md-4">
<label> Issue To <span class="text-danger">*</span> </label>
<select name="issued_to" class="form-control" id="issued_to">
<option value='' selected> -- Please Select -- </option>
<option value="student"> Registered Student </option>
<option value="other"> Other </option>
</select>
</div>
<div class="col-md-4">
<label> Student / Bearer <span class="text-danger">*</span> </label>
<select name="student_id" id="student_id" class="form-control student_id">
<option value='' selected> -- Please Select -- </option>
</select>
<input name="bearer_name" class="form-control bearer_name" type="text">
</div>
Javascript
<script>
$(function(){
$('.bearer_name').hide();
$('.student_id').show();
$('#issued_to').change(function(){
if( this.value == 'student'){
$('.bearer_name').hide(); //hide input
$('.student_id').show(); //show select
}
if( this.value == 'other'){
$('.bearer_name').show(); // show input works but does not show characters as typed on the keyboard
$('.student_id').hide();
}
})
});
</script>
question from:
https://stackoverflow.com/questions/65940353/why-would-html-text-field-not-respond-to-input-after-a-jquery-show-hide 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…