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

Question

我已经计算出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>

Answer 1

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

在您的情况下，您可以将其附加到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>

但是正如David Thomas所说，在select中包含div是无效的HTML。

此外，我认为您滥用了dir属性，该属性旨在指示元素文本的方向性(如英语和阿拉伯语(。

Answer 2

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