我正在try 从输入元素获取文本的一部分,这取决于用户单击的位置,但如果我在1和0之间单击,结果是错误的"שלום1",应该是"שלום0". 我try 在输入元素中添加css"unicode-bi i:plainText;". 这并没有帮助解决这个问题.

var myInput = document.getElementById("myInput")
myInput.value = "שלום 10 hello";

alert("Needs to be: 'שלום 0' \n Result '"+myInput.value.substring( 0, 6 )+"'")

function mouseUp(){
 alert("Result '"+myInput.value.substring( 0, myInput.selectionStart )+"'")
}
myInput.addEventListener("mouseup", mouseUp);
<input id="myInput" style="direction: rtl;unicode-bidi: plaintext;">

推荐答案

多亏了Bergi的 comments ,我找到了一个解决方案:

Sole.log("שלום10Hello".Split("").map(c=>;'${c}': \\u${c.charCodeAt(0).toString(16).padStart(4,'0')}).Join("\n"));可能有助于了解字符串是如何实际组成的,而不会出现奇怪的BIDI呈现,这就是Slice的工作原理.我猜你是need to add some ltr/rtl marks岁.

在阅读了 comments 中链接的页面后,我意识到Unicode格式提供了两种类型的键代码(LRM和RLM标记),它们在呈现时宽度为零,它们的目的是覆盖默认的方向流.

因此,当数字前面的第一个非空格相邻字符是RTL字符时,显式RTL字符会干扰数字的默认LTR行为.因此,当我在数字之前添加一个LRM BIDI控制字符时,它忽略了导致问题的RTL方向流覆盖.

需要考虑的一件事是: 我还了解到,如果紧跟在数字后面的是Ltr字符,则可能需要紧跟在数字后面的RLM控制字符(由于空格的中立性而忽略空格),因为如果一个句子的开头是一个RTL单词,后面跟一个(空格,LRM,数字,空格,Ltr单词),那么LRM流覆盖会将数字和后面的Ltr单词合并到一个单独的Ltr块中,这会反转数字和Ltr部分的显示,因为数字在Ltr块之前找到.因此,上面描述的字符串将呈现为: 数字、空格、Ltr单词、空格、RTL单词与预期的呈现方式形成对比. 我添加了一个代码示例来演示它:

var myInput = document.getElementById("myInput"),
    Normal = document.getElementById("Normal"),
    Fixed = document.getElementById("Fixed");
    
myInput.value = "שלום 10 hello";

Normal.innerHTML = myInput.value.substring( 0, 6 );
Normal.innerHTML += '<div style="display: inline-block;"></div>';
Normal.innerHTML += myInput.value.substring( 6, 14 );

Fixed.innerHTML = 
myInput.value.replace("10",String.fromCodePoint("0x200E")+"10").substring( 0, 7 );
Fixed.innerHTML += '<div style="display: inline-block;"></div>';
Fixed.innerHTML += myInput.value.replace("10",String.fromCodePoint("0x200E")+"10"+String.fromCodePoint("0x200F")).substring( 7, 16 );
<input id="myInput" style="direction: rtl;width: 79px;">
<h3>Before the fix</h3>
<div id="Normal" style="background: #ffa0a0;width: fit-content;direction: rtl;display: inline-block;"> </div>

<h3>After the fix</h3>
<div id="Fixed" style="background: #a2ffa0;width: fit-content;direction: rtl;display: inline-block;"> </div>

Javascript相关问答推荐

如何在Javascript中的控制台上以一行形式打印循环的结果

如何在Javascript中使用Go和检索本地托管Apache Arrow Flight服务器?

用JavaScript复制C#CRC 32生成器

为什么按钮会随浮动属性一起移动?

如何在文本字段中输入变量?

本地库中的chartjs-4.4.2和chartjs-plugin-注解

如何在Svelte中从一个codec函数中调用error()?

基于props 类型的不同props ,根据来自接口的值扩展类型

在开发期间,Web浏览器如何运行&qot;.jsx&qot;文件?

将嵌套数组的元素乘以其深度,输出一个和

在单击按钮时生成多个表单时的处理状态

将延迟加载的模块转换为Eager 加载的模块

有没有办法在R中创建一张具有多个色标的热图?

输入数据覆盖JSON文件

Refine.dev从不同的表取多条记录

无法在Adyen自定义卡安全字段创建中使用自定义占位符

在使用Jest进行测试时,在Express应用程序中未定义Multer

TS node 找不到依赖的模块

This.forceUPDATE并通过Reaction-Router-DOM链接组件传递状态

.Remove()函数不适用于MongoDB