使用 css {direction:rtl} 时出现文本输入字段问题答案

【问题标题】：Issue with text-input field while using css {direction:rtl}使用 css {direction:rtl} 时出现文本输入字段问题
【发布时间】：2020-08-05 09:29:48
【问题描述】：

我正在做一个二进制数的计算器。我使用文本输入字段输入二进制数和运算符，在其中我使用虚拟按钮输入值，我希望当输入字段溢出时它应该看起来像 [...10100101010] 因此我使用了 CSS {direction : rtl; text-overflow: ellipsis;} 但我遇到了一个问题，即当我通过单击使用与其他按钮相同的功能的按钮输入任何运算符时，运算符看起来像 [+10001] 而不是像 [10001+] . 帮我解决上述问题。我的代码如下。

<html>
<title>Binary Calculator</title>
<head>
</head>
<body>
<input id="input" style="direction:rtl; text-overflow:ellipsis;" type="text" >
<br>
<br>
<input  onclick="enter('0')" value="0" type="button">
<input onclick="enter('1')" value="1" type="button">
<input onclick="enter('+')" value="+" type="button">
<input onclick="convert()" value="Convert" type="button">
<script>
function enter(n_val){
document.getElementById("input").value += n_val
}
</script>
</body>
</html>

【问题讨论】：

标签： javascript html css textfield input-field

【解决方案1】：

似乎符号不能很好地与 RTL 属性配合使用，它们可能会意外显示。我发现像这样在+ 之前和之后放置&#x200E; 或&lrm; 可以达到你想要的效果：你的代码：

<input onclick="enter('+')" value="+" type="button">

解决方案：

<input onclick="enter('&#x200E;+&#x200E;')" value="+" type="button">

我自己并不完全理解，请参阅here 以获得更好的解释。

对于双向语言（也可能与符号/字母一起使用），您的 html 代码允许您将文本包装在元素中，您可以使用包装不同方向的文本以使其显示您想要的方式。

更多信息请参见MDN。

希望这会有所帮助！

【讨论】：

我想在我的代码中添加一些十进制计算。如果我使用你的 ‎并获取 input.value 并将其存储在任何变量 let x 然后使用 eval(x) 函数来解决它然后 eval() 不起作用，例如如果我在该输入字段中输入 1+2 并将这个表达式存储在变量 x 中并使用 eval(x) 那么它不能解决该表达式。但在使用 &lrm eval() 函数之前运行良好。帮助我如何解决使用 ‎ 后新出现的问题。
对不起哥们，我的猜测和你的一样好！我根本不知道任何 javascript，并且是 html 的初学者。祝你好运！