uni-app ios系统下某些机型input输入小数点的同时会显示placeholder

uni-app ios系统下某些机型input输入小数点的同时会显示placeholder

类别 信息
产品分类 uniapp/H5
PC开发环境 Windows
操作系统版本 windows11
HBuilderX 正式版
版本号 4.13
浏览器平台 微信内置浏览器
浏览器版本 最新
项目创建方式 HBuilderX

操作步骤：

  • 正常使用input type="digit"

预期结果：

  • 正常显示输入内容

实际结果：

  • 输入小数点时placeholder也会显示

bug描述：

  • ios系统下某些机型input输入小数点的同时会显示placeholder

image


更多关于uni-app ios系统下某些机型input输入小数点的同时会显示placeholder的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

感谢反馈，测了一下并未复现该问题，你是指在特定机型下的IOS打开微信小程序会复现该问题吗？如果会复现，具体是哪几个机型能稳定复现呢？

更多关于uni-app ios系统下某些机型input输入小数点的同时会显示placeholder的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 Uni-App 中，如果在 iOS 系统下某些机型的 input 输入框在输入小数点的同时会显示 placeholder，这可能是由于 iOS 系统的某些默认行为或 Uni-App 的渲染机制导致的。以下是一些可能的解决方案：

1. 使用 @input 事件手动控制 placeholder 的显示

你可以在 input 组件上监听 @input 事件，在输入内容时动态隐藏 placeholder。

<template>
  <view>
    <input
      type="text"
      v-model="inputValue"
      :placeholder="showPlaceholder ? '请输入内容' : ''"
      @input="handleInput"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',
      showPlaceholder: true
    };
  },
  methods: {
    handleInput(event) {
      this.showPlaceholder = event.detail.value === '';
    }
  }
};
</script>

2. 使用 @focus 和 @blur 事件控制 placeholder

你可以通过监听 @focus 和 @blur 事件来控制 placeholder 的显示和隐藏。

<template>
  <view>
    <input
      type="text"
      v-model="inputValue"
      :placeholder="showPlaceholder ? '请输入内容' : ''"
      @focus="handleFocus"
      @blur="handleBlur"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',
      showPlaceholder: true
    };
  },
  methods: {
    handleFocus() {
      this.showPlaceholder = false;
    },
    handleBlur() {
      this.showPlaceholder = this.inputValue === '';
    }
  }
};
</script>

3. 使用 placeholder-style 动态样式

你可以通过 placeholder-style 动态设置 placeholder 的样式，例如在输入内容时隐藏 placeholder。

<template>
  <view>
    <input
      type="text"
      v-model="inputValue"
      placeholder="请输入内容"
      :placeholder-style="placeholderStyle"
      @input="handleInput"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',
      placeholderStyle: 'color: #999;'
    };
  },
  methods: {
    handleInput(event) {
      this.placeholderStyle = event.detail.value === '' ? 'color: #999;' : 'color: transparent;';
    }
  }
};
</script>
回到顶部