-2

我发现这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>
4

2 回答 2

0

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

在您的情况下，您可以将其附加到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属性，该属性旨在指示元素文本的方向性（例如英语与阿拉伯语）。

于 2018-10-30T22:50:25.357 回答
0

这就是我在发现 onkeyup() 后发现的。但我仍然有一个麻烦。

JS

  function check(){
   document.getElementById("textToRight").dir = "rtl";


<select class="textToRight">

    <option class="this1"> TEXT1</option>
    <option class="this2"> TEXT2</option>
    <option class="this3"> TEXT3</option>

</select>

<input class="dontChange" placeholder="dontChange"></input>
<input class="change" placeholder="change" onkeyup='check()'></input>

我不知道如何做这个片段，但通过测试它，它可以工作。但是，我现在遇到的问题是我无法将其还原。那么我可以对文本的长度设置条件吗？如果 == 0 做 ltr .. 否则 dir = rtl。

于 2018-10-30T23:09:16.197 回答