텍스트 상자 정렬 최적화: 양식을 더욱 아름답게 만드세요.

CSS와 JavaScript를 사용하면 텍스트 상자 정렬을 최적화하여 양식 가독성과 사용자 경험을 향상시킬 수 있습니다. 특정 최적화 방법에는 수평 및 수직 정렬을 위해 CSS text-align 및 수직 정렬 속성을 사용하는 것이 포함됩니다. JavaScript setSelectionRange 및 getCompulatedStyle 함수를 사용하여 텍스트 상자를 동적으로 정렬합니다. 실제 사례에서는 텍스트 상자 너비, 가운데 정렬, 세로 가운데 정렬을 설정하여 정렬 효과를 최적화할 수 있습니다.

텍스트 상자 정렬 최적화: 양식을 더욱 아름답게 만드세요.

양식에서 텍스트 상자 정렬은 사용자 경험과 가독성에 매우 중요합니다. 적절하지 않은 정렬은 혼란과 시각적 혼란을 초래할 수 있습니다. 이 기사에서는 CSS와 JavaScript를 사용하여 텍스트 상자 정렬을 최적화하는 방법을 소개하고 참조할 수 있는 실제 사례를 제공합니다.

CSS를 사용하여 텍스트 상자 정렬

CSS는 텍스트 상자를 정렬하는 다양한 방법을 제공합니다.

• text-align: 는 텍스트를 가로로 정렬하는 데 사용됩니다. 왼쪽, 가운데, 오른쪽 또는 양쪽 정렬으로 설정할 수 있습니다. left, center, right 或 justify。
• vertical-align：用于垂直对齐文本。它可以设置为 top, middle, bottom 或 baseline

vertical-align:

텍스트를 수직으로 정렬하는 데 사용됩니다. 상단, 중간, 하단 또는 기준선으로 설정할 수 있습니다.

/* 水平对齐文本框为居中 */
input[type="text"] {
  text-align: center;
}

/* 垂直对齐文本框为顶部 */
input[type="text"] {
  vertical-align: top;
}

JavaScript를 사용하여 텍스트 상자 정렬

• JavaScript는 텍스트 상자를 동적으로 정렬할 수 있습니다.
• setSelectionRange(): 는 텍스트 상자에서 선택한 텍스트 범위를 설정하는 데 사용됩니다.

getCompulatedStyle():

요소의 계산된 스타일 속성을 가져오는 데 사용됩니다.

// 获取文本框元素
const input = document.querySelector('input[type="text"]');

// 设置文本框光标到开头
input.setSelectionRange(0, 0);

// 获取文本框的内边距
const paddingLeft = parseInt(getComputedStyle(input).paddingLeft);
const paddingRight = parseInt(getComputedStyle(input).paddingRight);

// 计算文本框的可用宽度
const availableWidth = input.clientWidth - paddingLeft - paddingRight;

// 设置文本框文本对齐为居中
input.style.textAlign = availableWidth / 2 > 0 ? 'center' : 'left';

실용 예

두 개의 텍스트 상자가 있는 양식을 생각해 보세요.

<form>
  <label for="name">姓名：</label>
  <input type="text" id="name" />
  <label for="email">电子邮件：</label>
  <input type="text" id="email" />
  <button type="submit">提交</button>
</form>

위에서 설명한 기술을 사용하여 텍스트 상자 정렬을 최적화할 수 있습니다. 🎜

input[type="text"] {
  text-align: center;
  vertical-align: middle;
  width: 200px;
}

const inputs = document.querySelectorAll('input[type="text"]');
inputs.forEach((input) => {
  input.setSelectionRange(0, 0);
  const paddingLeft = parseInt(getComputedStyle(input).paddingLeft);
  const paddingRight = parseInt(getComputedStyle(input).paddingRight);
  const availableWidth = input.clientWidth - paddingLeft - paddingRight;
  input.style.textAlign = availableWidth / 2 > 0 ? 'center' : 'left';
});

🎜이렇게 하면 텍스트 상자가 가로 중앙에 배치되고 가운데 세로로 정렬됩니다. 이 정렬은 양식 가독성과 사용자 경험을 향상시킵니다. 🎜

위 내용은 텍스트 상자 정렬 최적화: 양식을 더욱 아름답게 만드세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!