フォーカスされた入力のみを使用できるようにするにはどうすればよいですか？

Question

常に1つの入力イネーブルしか作成しません。そのためには、disabled属性を追加して入力を無効にし、jQueryでクリックするとその属性を削除することができます。このように：

$('input').on('click', function(){ 
 
    $(this).prop('disabled', false); 
 
})

input, div{ 
 
    width: 230px; 
 
    height: 20px; 
 
    padding: 0; 
 
    margin-top: 5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="myform" method="GET" action="/mypath"> 
 
    <input type="text" disabled ><br> 
 
    <input type="text" disabled ><br> 
 
    <input type="text" disabled > 
 
</form>

残念ながら何もクリック時に起こりません。何が間違っていて、どうすれば修正できますか？

Answer 1

無効な要素はマウスイベントを実行しません。したがって、それらを間接的に選択する必要があります。 1つの方法は、無効な入力の前に要素を追加して、その要素のクリックをシミュレートすることです。これは、クロスブラウザとの完全な互換性のための唯一の方法です。

$(this).hide().prev("input[disabled]").prop("disabled", false).focus(); 

とblur上：コードを

$(this).prop("disabled", true).next("div").show(); 

完全版：

$('form#myform > div').on('click', function(){ 
 
    $(this).hide().prev("input[disabled]").prop("disabled", false).focus(); 
 
}) 
 

 
$('form#myform > input').on('blur', function(){ 
 
    $(this).prop("disabled", true).next("div").show(); 
 
})

input, div{ 
 
    width: 230px; 
 
    height: 20px; 
 
    padding: 0; 
 
    margin-top: 5px; 
 
} 
 

 
div{ 
 
    /* border: 1px solid red; */ 
 
    position: absolute; 
 
    margin-top: -22px; /* I've used 22 instead of 20 because of input border */ 
 
    cursor: text; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="myform" method="GET" action="/mypath"> 
 
    <input type="text" disabled > 
 
    <div></div> 
 
    <br> 
 
    <input type="text" disabled > 
 
    <div></div> 
 
    <br> 
 
    <input type="text" disabled > 
 
    <div></div> 
 
    <br> 
 
</form>

は、あなたが/非表示clickにその要素を示すべきであることを記述しました

Answer 2

disabledの代わりにdisabledの要素にイベントがないため（this answerをチェックできます）readonlyを使用できます。

$('input').on('click', function() { 
 
    $('input').prop('readonly', true); 
 
    $(this).prop('readonly', false); 
 
})

input, 
 
div { 
 
    width: 230px; 
 
    height: 20px; 
 
    padding: 0; 
 
    margin-top: 5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="myform" method="GET" action="/mypath"> 
 
    <input type="text" readonly><br> 
 
    <input type="text" readonly><br> 
 
    <input type="text" readonly> 
 
</form>