javascript - onclick 检查输入字段是否为空然后将文本 onclick 更改为密码

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

为什么您的代码不起作用。

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

我应用的解决方案

点击按钮时，检查文本框是否为空。

Note: I am considering space as a valid character in the input box, because it can be used for password. If you want to eliminate space you can use $('#discountCode').val().trim().length

工作演示

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

<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>