我的输入框内有是否显示密码的切换按钮。但是在我点击它时。输入框的焦点还存在，会弹出焦点

这个问题可以通过JavaScript代码来解决。可以在切换按钮的点击事件中添加一行代码，使输入框失去焦点。具体实现方式可以使用以下代码：

// 获取切换按钮
var toggleBtn = document.getElementById("toggleBtn");

// 获取输入框
var passwordInput = document.getElementById("passwordInput");

// 给切换按钮添加点击事件
toggleBtn.onclick = function() {
  // 切换输入框的 type 属性值
  var type = passwordInput.type === "password" ? "text" : "password";
  passwordInput.type = type;
  
  // 让输入框失去焦点
  passwordInput.blur();
}

这样点击切换按钮时，输入框就会失去焦点，不会弹出焦点。

相关问题

vue当点击按钮时，会弹出输入框，未点击时会显示默认值未填写

您可以使用Vue的条件渲染来实现这个功能。您可以通过一个变量来控制输入框的显示与隐藏，并设置默认值。

首先，在Vue的data中定义一个变量来控制输入框的显示与隐藏，比如`showInput`，并设置默认值为`false`。

接下来，在模板中使用`v-if`指令来根据`showInput`的值来判断是否显示输入框。

然后，在按钮的点击事件中，将`showInput`设置为`true`，从而显示输入框。

最后，在输入框中使用`v-model`指令绑定一个数据属性，用于保存用户输入的值。

下面是一个示例代码：

<template>
  <div>
    <button @click="showInput = true">点击按钮</button>
    <div v-if="showInput">
      <input type="text" v-model="inputValue" :value="defaultValue" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showInput: false,
      inputValue: '',
      defaultValue: '默认值未填写',
    };
  },
};
</script>

这样，当用户点击按钮时，输入框会弹出，并且显示默认值未填写。用户可以在输入框中填写内容，并且通过`inputValue`属性来获取用户输入的值。

修改代码让点击提交按钮时输入内容不合法时在输入框显示红色边框

假设你的提交按钮是一个 `button` 元素，输入框是一个 `input` 元素，可以通过以下代码实现输入内容不合法时在输入框显示红色边框：

<input id="myInput" type="text">
<button id="submitBtn">提交</button>

<script>
  const inputEl = document.getElementById('myInput');
  const submitBtnEl = document.getElementById('submitBtn');
  
  submitBtnEl.addEventListener('click', () => {
    const inputValue = inputEl.value;
    if (inputValue.trim().length === 0) { // 检查输入是否为空或者纯空格
      inputEl.style.border = '1px solid red'; // 设置红色边框
    } else {
      // 如果输入合法，清除红色边框
      inputEl.style.border = 'none';
      // TODO: 提交表单或执行其他操作
    }
  });
</script>

这段代码首先获取了输入框和提交按钮的元素，并为提交按钮添加了一个 `click` 事件监听器。当用户点击按钮时，会获取输入框的值，并检查其是否为空或者纯空格。如果输入不合法，就设置输入框的红色边框；否则，清除红色边框并执行提交操作。