在选择文本框时焦点不起作用

on Focus not working when textbox selected

本文关键字：焦点 不起作用 选择 文本      更新时间：2023-09-26

我这里有一个表单，它像用户能够选择单选按钮来选择预定义的金额选项，或者按文本框(焦点(选择自定义金额。下面的javascript的目的是在选择预定义的金额时清除文本框。它还允许用户单击文本框(对焦(以在CP_otheramount字段中输入自定义金额(也可以使用单选按钮作为回退(。

除了对焦之外，一切似乎都在工作。它在负载上完美运行...但请尝试以下方案：

加载页面，在文本框内单击，然后决定通过选择值 3 单选按钮 (64( 来改变主意...然后决定再次在对焦文本框内按下数量...它被禁用并阻止您单击内部或输入数字！

谁能看到这里的问题？这很奇怪，因为它适用于Stackoverflow，而不是在实时站点上。我的帮助将不胜感激。

以下是到目前为止创建的内容：

function activate() {
  $('#other').prop('checked', true);
  $('#other').trigger('click');
  $('#theamount').focus();
}
$('input[name="am_payment"]').on('click', function() {
  if ($(this).val() === '') {
    $('input[name="CP_otheramount"]').val('');
    $('#theamount').removeAttr("disabled");
  } else {
    $('#theamount').prop("disabled", "disabled");
    $('input[name="CP_otheramount"]').val('');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="radio" name="am_payment" value="3" checked="checked"> <strong>64</strong>
<input type="radio" name="am_payment" value="11" checked="checked"> <strong>100</strong>
<input type="radio" name="am_payment" value="32" checked="checked"> <strong>250</strong>
<input type="radio" value="" name="am_payment" id="other">
<label>Other</label>
<span onclick="activate();"><input type="text" name="CP_otheramount" value="" id="theamount" disabled="disabled"/></span>

代码的问题在于您正在检查每个单选按钮而没有取消选中它们。

function activate() {
  // $('#other').prop('checked', true); Remove this line;
  $('#other').trigger('click');
  $('#theamount').focus();
}
$('input[name="am_payment"]').on('click', function() {
  if ($(this).val() === '') {
    $('input[name="CP_otheramount"]').val('');
    $('#theamount').removeAttr("disabled");
  } else {
    $('#theamount').prop("disabled", "disabled");
    $('input[name="CP_otheramount"]').val('');
  }
});

而且

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Only check one, or none by Default -->
<input type="radio" name="am_payment" value="3" checked = "checked"> <strong>64</strong>
<input type="radio" name="am_payment" value="11"> <strong>100</strong>
<input type="radio" name="am_payment" value="32"> <strong>250</strong>
<input type="radio" value="" name="am_payment" id="other">
<label>Other</label>
<span onclick="activate();"><input type="text" name="CP_otheramount" value="" id="theamount" disabled="disabled"/></span>

更新：

它

对我有用，但我不知道为什么它不适合你，所以我重写了函数。看看这是否适合您。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="radio" name="am_payment" value="3" checked = "checked"> <strong>64</strong>
<input type="radio" name="am_payment" value="11"> <strong>100</strong>
<input type="radio" name="am_payment" value="32"> <strong>250</strong>
<input type="radio" value="" name="am_payment" id="other">
<label>Other</label>
<span id="toggle"><input type="text" name="CP_otheramount" value="" id="theamount" disabled="disabled"/></span>
<script>
    function activate(){
        $('#theamount').attr('disabled',false);
        $('#theamount').focus();
        $('#other').click();
    }
    function deactivate(){
        $('#theamount').val('');
        $('#theamount').attr('disabled',true);
    }
    $('#toggle').click(function(){
        activate();
    });
    $('input[name="am_payment"]').change(function(){
        if($(this).val() != ""){
            deactivate();
        }else{
            activate();
        }
    });
</script>
相关文章：