时间戳

首页 > 解决方案 > 在输入字段中输入内容时在选择框中缩进文本

javascript - 在输入字段中输入内容时在选择框中缩进文本

问题描述

我发现这dir="rtl"会使文本位于右侧；但是我希望在input元素中写入某些内容时有条件地发生这种情况。

我正在考虑禁用dir="rtl"，直到将某些内容输入到input元素中，然后才启用rtl。但是，问题在于更改所暗示的“刷新页面”要求。

这是带有文本的简单下拉框。

  <Select class="textToRight" dir="rtl">
      <div class = "toRight">
      <option class="this1"> TEXT1</option>
      <option class="this2"> TEXT2</option>
      <option class="this3"> TEXT3</option>
      </div>
    </select>
    <input class ="dontChange" placeholder="dontChange"></input>
    <input class ="change" placeholder="change"></input>

标签： javascripthtmlcss

解决方案

要回答您的问题，是的，您可以通过附加事件处理程序来修改一个元素的属性，同时在另一个元素中触发事件。

在您的情况下，您可以将其附加到focusin和focusout事件。

var selectBox = document.querySelector(".textToRight");
var changeInput = document.querySelector(".change");

changeInput.addEventListener("focusin", function() {
  selectBox.dir = "rtl";
});
changeInput.addEventListener("focusout", function() {
  selectBox.dir = "ltr";
});
<select class="textToRight">
  <div class="toRight">
    <option class="this1"> TEXT1</option>
    <option class="this2"> TEXT2</option>
    <option class="this3"> TEXT3</option>
  </div>
</select>
<input class="dontChange" placeholder="dontChange"></input>
<input class="change" placeholder="change"></input>

但是正如大卫托马斯所说的那样，有一个div内部 aselect不是有效的 HTML。

另外，我认为您在滥用该dir属性，该属性旨在指示元素文本的方向性（例如英语与阿拉伯语）。

推荐阅读