基于浏览器宽度用Vanilla Javascript调整文本框对齐方式

嘿，我明白你要解决的问题了——想在浏览器窗口缩小到特定尺寸时，让所有文本框和下拉框里的内容右对齐对吧？之前你试的那些调整padding、margin或者插空格的方法其实都是绕了弯路，直接用CSS的文本对齐属性配合JS监听窗口尺寸变化才是正解，我给你两个实用方案：

方案1：原生JS直接操作元素样式 #

这种方式适合快速实现，不需要额外写CSS类：

// 自定义窗口宽度阈值（比如设定为移动端常用的768px，可按需修改）
const WIDTH_THRESHOLD = 768;

// 选中所有目标表单元素：文本框和下拉框
const formElements = document.querySelectorAll('input[type="text"], select');

// 核心对齐处理函数
function adjustElementAlignment() {
  const currentWindowWidth = window.innerWidth;
  
  if (currentWindowWidth <= WIDTH_THRESHOLD) {
    // 窗口尺寸达标时，设置右对齐
    formElements.forEach(element => {
      element.style.textAlign = 'right';
      // 部分浏览器的下拉框需要额外调整direction属性来确保选项对齐，可选
      if (element.tagName === 'SELECT') {
        element.style.direction = 'rtl';
      }
    });
  } else {
    // 窗口超过阈值时，恢复默认对齐样式
    formElements.forEach(element => {
      element.style.textAlign = '';
      if (element.tagName === 'SELECT') {
        element.style.direction = '';
      }
    });
  }
}

// 页面加载时先执行一次，确保初始状态正确
window.addEventListener('load', adjustElementAlignment);

// 监听窗口 resize 事件，实时响应尺寸变化
window.addEventListener('resize', adjustElementAlignment);

方案2：CSS类配合JS切换（推荐） #

这种方式更符合「样式归CSS，逻辑归JS」的最佳实践，后续维护更方便：
首先写CSS类：

/* 定义右对齐的样式类 */
.right-align-form-elements input[type="text"],
.right-align-form-elements select {
  text-align: right;
}

/* 针对下拉框的兼容处理 */
.right-align-form-elements select {
  direction: rtl;
}

然后用JS控制类的添加/移除：

const WIDTH_THRESHOLD = 768;
// 选择表单的容器元素（比如body，或者你的表单父容器）
const formContainer = document.body;

function toggleAlignmentClass() {
  const currentWindowWidth = window.innerWidth;
  if (currentWindowWidth <= WIDTH_THRESHOLD) {
    formContainer.classList.add('right-align-form-elements');
  } else {
    formContainer.classList.remove('right-align-form-elements');
  }
}

// 初始化+监听窗口变化
window.addEventListener('load', toggleAlignmentClass);
window.addEventListener('resize', toggleAlignmentClass);

为什么之前的方法没效果？ #

你之前尝试的调整padding、margin或者插入空格的方式，本质是用视觉偏移模拟对齐，但不同元素的默认样式、尺寸存在差异，很容易出现对齐不一致的情况，而且没办法真正让输入框内的用户输入内容右对齐。直接设置text-align: right才是让元素内容真正实现右对齐的核心方法。

内容的提问来源于stack exchange，提问作者Adam Schneider