Проблема с полем ввода текста при использовании css {direction: rtl} - PullRequest
Новая
       5

Проблема с полем ввода текста при использовании css {direction: rtl}

1 голос
/ 22 апреля 2020

Я делаю калькулятор для двоичных чисел. Я использую поле ввода текста для ввода двоичных чисел и оператора, в котором я вводю значения с помощью виртуальных кнопок, и я хочу, чтобы, когда поле ввода стало переполненным, оно должно выглядеть как [... 10100101010], поэтому я использовал CSS {направление: 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>

1 Ответ

0 голосов
/ 22 апреля 2020

Кажется, что символы не очень хорошо работают со свойством RTL и могут отображаться неожиданно. Я обнаружил, что размещение &#x200E; или &lrm; до и после + примерно так, работает для достижения того, что вы хотели: Ваш код:

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

Решение:

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

Я сам не до конца понимаю, поэтому для лучшего объяснения см. здесь .

Для двунаправленных языков (и, возможно, использования с символами / буквы тоже), где ваш код html позволяет заключать текст в элементы, вы можете использовать его для переноса текста в разных направлениях, чтобы он отображался так, как вы хотите.

См. MDN для получения дополнительной информации.

Надеюсь, это поможет!

...