Question

我有这个HTML代码：

<input type="text" class="input_discount" id="discountCode" placeholder="ENTER YOUR TEXT">

<button type="button" class="btn apply_btn" id="changeType" required/>APPLY</button>

JS：

$('#changeType').click(function(){
    $('#discountCode').attr('type','password');
});

代码运行正常。但是当我在输入字段中输入文本并单击“应用”按钮时，它会将输入类型转换为密码。但是当我直接点击“应用”按钮然后在输入字段内写入时，它会显示密码格式。如果输入字段为空并且用户点击“应用”按钮，输入类型仍然是重点，并且应该采用文本格式，并且在填写详细信息后，它应该转换为密码格式，任何人都可以告诉我如何防止这种情况。

Answer 1

为什么您的代码无效。

当没有输入任何内容时，根据您的代码，它将类型转换为文本。

我申请的解决方案

单击该按钮时，请检查文本框是否为空。

注意：我将space视为输入框中的有效字符，因为它可用于密码。如果你想消除space，你可以使用 $('#discountCode').val().trim().length

工作演示

＆＃13;

$('#changeType').click(function(e) {
  if ($('#discountCode').val().length) {
    $('#discountCode').attr('type', 'password');
  } else {
    $('#discountCode').attr('type', 'text');
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="input_discount" id="discountCode" placeholder="ENTER YOUR TEXT">

<button type="button" class="btn apply_btn" id="changeType" required/>APPLY</button>

＆＃13;

单击Onclick检查输入字段是否为空，然后将文本onclick更改为password

1 个答案: