为什么在Android和iOS平台上，设置input元素宽度为0时，输入内容的方向会有所不同？-html教程-PHP中文网

为什么在Android和iOS平台上，设置input元素宽度为0时，输入内容的方向会有所不同？

霞舞

发布： 2025-03-19 09:36:02

原创

384人浏览过

为什么在android和ios平台上，设置input元素宽度为0时，输入内容的方向会有所不同？

Android与iOS平台下HTML+JS代码运行差异分析

本文探讨在Android和iOS平台上，HTML+JS代码中设置input元素宽度为0时，输入内容方向差异的原因。在开发OTP输入组件时，我们发现Android平台上，设置宽度为0的input元素，输入内容方向为从右到左，而iOS平台则正常显示。

问题描述

点击“开始输入”按钮后，iOS系统下输入正常，Android系统下输入方向却从右到左。关键代码为style="width: 0;"。移除或修改此样式，输入方向即可恢复正常。

相关HTML和JavaScript代码如下：

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<button id="test_button">开始输入</button>
<div>当前输入内容: <span id="test_span"></span></div>
<input type="text" id="test_input" style="width: 0;">

<script>
  document.getElementById('test_button').addEventListener('click', () => {
    document.getElementById('test_input').focus();
  });

  setInterval(() => {
    document.getElementById('test_span').innerText = document.getElementById('test_input').value;
  }, 0);
</script>

登录后复制