uni-app 标注键盘与安全键盘 切换的输入框时候同时显示

在 uni-app 中，如果你希望在切换标注键盘与安全键盘时，输入框的内容能够同时显示，可以通过动态绑定输入框的类型 (type) 来实现。通常情况下，标注键盘对应的输入框类型是 text，而安全键盘对应的输入框类型是 password。

你可以通过一个开关（如 switch 或 checkbox）来控制输入框的类型，并在切换时更新输入框的内容。

以下是一个简单的示例代码：

<template>
  <view class="container">
    <!-- 输入框 -->
    <input
      :type="inputType"
      v-model="inputValue"
      placeholder="请输入内容"
    />

    <!-- 切换按钮 -->
    <view class="switch-container">
      <text>切换键盘类型：</text>
      <switch :checked="isSecure" @change="toggleKeyboard" />
      <text>{{ isSecure ? '安全键盘' : '标注键盘' }}</text>
    </view>

    <!-- 显示输入内容 -->
    <view class="input-display">
      <text>输入内容：{{ inputValue }}</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      inputValue: '', // 输入框的值
      isSecure: false, // 是否使用安全键盘
    };
  },
  computed: {
    // 动态计算输入框类型
    inputType() {
      return this.isSecure ? 'password' : 'text';
    },
  },
  methods: {
    // 切换键盘类型
    toggleKeyboard(event) {
      this.isSecure = event.detail.value;
    },
  },
};
</script>

<style>
.container {
  padding: 20px;
}

.switch-container {
  margin-top: 20px;
  display: flex;
  align-items: center;
}

.input-display {
  margin-top: 20px;
}
</style>