javascript - 当焦点在同一类的输入框之间移动时，如何保持只读 ="false"？

Question

我希望每当用户将焦点移出输入框时，它都应该变成只读模式。但是我在运行时生成了文本框，它们都具有相同的类，并且我希望这些文本框不应该变成只读模式，直到 用户离开该类文本框。但发生的情况是，一次只能有一个文本框获得焦点，因此同一类的其他文本框最终会变为只读。

例如..

<span id="file_div">
<?php foreach($arr as $skill) 
    {echo '<input readonly name="txtSkill[]" value="'.$skill.'" class="txt11"/>'; }?>
</span>
<input type="button" value="Edit" name="btnEdit11"id="btnXyz2" class="btn11"/>

<input readonly name="txtQualif" value="<?= $row[15];?>" class="txt12"/>
<input type="button" value="Edit" name="btnEdit12"id="btnXyz2" class="btn12"/>

<script>
$(".btn11").click(function(){
    $(".txt11").eq(0).focus(); // focus the first
    $(".txt11").prop("readonly", false);
});

$(".btn12").click(function(){
    $(".txt12").focus();
    $(".txt12").prop("readonly", false);
});

$(".txt11").focusout(function(){
    $(".txt11").prop("readonly", true);
});

$(".txt12").focusout(function(){
    $(".txt12").prop("readonly", true);
});
</script>

编辑:

我不想松开“readonly=false”，直到用户单击不同类名的文本框。在上面的例子中，只要用户在名为 txt11 的类之间单击，所有类名为 txt11 的文本框的 readonly 属性就应该是 readonly=false。但是，如果用户单击类名为 txt12 的文本框，则所有类名为 txt11 的文本框将被设置为只读

Answer 1

您需要为每个文本输入字段定义焦点，因此只要特定输入仅焦点突出，它就会更改为 raedonly 模式

$(".txt11").each(function(){
    $(this).focusout(function(){
          $(this).prop("readonly", true);
    });
});