同时在两个文本框上显示光标

时间:2021-05-13 23:10:28

I have two text boxes like,

我有两个文本框,

<input type="text" id="left" />
<input type="text" id="right" />

Is it possible to focus these two text boxes at the same time? I don't know how it possible.I need to show cursor in these two text boxes at the same time. if i focus #left ,#right lost its focus.

是否可以同时关注这两个文本框?我不知道怎么可能。我需要同时在这两个文本框中显示光标。如果我专注于#left,#右失去了它的焦点。

Note : I am trying to create a side by side web application.shows two same views on single web page.

注意:我正在尝试创建并行Web应用程序。在单个网页上显示两个相同的视图。

I know how to show the same values,I need to show the cursor blinking on two inputs.

我知道如何显示相同的值,我需要在两个输入上显示光标闪烁。

5 个解决方案

#1


2  

Try doing something like this...Every time the left input is changed the right one's value is change too.

尝试做这样的事情...每次改变左输入时,正确的值也会改变。

$("#left").on("input",function() {
  $("#right").val($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="left" />
<input type="text" id="right" />

#2


2  

If you want to clone your input, you can simply do this by adding an oninput attribute like:

如果要克隆输入,可以通过添加oninput属性来执行此操作,如:

<input type="text" id="left" name="left" oninput="right.value = left.value; return true;" />
<input type="text" id="right" name="right" oninput="left.value = right.value; return true;" />

No jQuery needed. Customize it the way you want it. Here's a fiddle:

不需要jQuery。按照您想要的方式自定义它。这是一个小提琴:

<input type="text" id="left" name="left" oninput="right.value = left.value; return true;" />
<input type="text" id="right" name="right" oninput="left.value = right.value; return true;" />

#3


1  

you can't focus same time, but you make it like you write in one textbox same time bind it in other textbox using jQuery or AngularJS.

你不能同时关注,但你就像在一个文本框中写一样,同时使用jQuery或AngularJS将其绑定在其他文本框中。

#4


1  

You can't, and you really shouldn't... That's like asking you to read a book while watching TV.

你不能,而你真的不应该...这就像是在看电视时要求你读一本书。

However, that sort of thing, might be possible on multi-user & multi-touch OS machines. That is, two users on the same machine can work two different tasks simultaneously on the same surface. But that's military. And even than, one user, can only have one input focus at a time.

但是,在多用户和多点触控操作系统机器上可能会出现这种情况。也就是说,同一台机器上的两个用户可以在同一表面上同时处理两个不同的任务。但那是军事上的。甚至比一个用户一次只能有一个输入焦点。

#5


0  

I found http://codepen.io/keilin/pen/lCkap for css.

我为css找到了http://codepen.io/keilin/pen/lCkap。

And added:

$("#left").on('keydown change', function(e) {
        $("#right").val($(this).val());
        console.log($("#right").val());
        $overlay.text($(this).val());
        var offset = $cursor.offset();
        var inputLeft = $(_this).offset().left;
        offset.left = Math.min($overlay.outerWidth(), $(_this).innerWidth() - 4);
        offset.left = inputLeft + Math.max(offset.left, 0);
        $cursor.offset(offset);
 });

If i understand correctly, you want something this: https://jsfiddle.net/8csab3t1/1/

如果我理解正确,你需要这样的东西:https://jsfiddle.net/8csab3t1/1/

ps: It's just an example. Please check with two chars.

ps:这只是一个例子。请检查两个字符。

#1


2  

Try doing something like this...Every time the left input is changed the right one's value is change too.

尝试做这样的事情...每次改变左输入时,正确的值也会改变。

$("#left").on("input",function() {
  $("#right").val($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="left" />
<input type="text" id="right" />

#2


2  

If you want to clone your input, you can simply do this by adding an oninput attribute like:

如果要克隆输入,可以通过添加oninput属性来执行此操作,如:

<input type="text" id="left" name="left" oninput="right.value = left.value; return true;" />
<input type="text" id="right" name="right" oninput="left.value = right.value; return true;" />

No jQuery needed. Customize it the way you want it. Here's a fiddle:

不需要jQuery。按照您想要的方式自定义它。这是一个小提琴:

<input type="text" id="left" name="left" oninput="right.value = left.value; return true;" />
<input type="text" id="right" name="right" oninput="left.value = right.value; return true;" />

#3


1  

you can't focus same time, but you make it like you write in one textbox same time bind it in other textbox using jQuery or AngularJS.

你不能同时关注,但你就像在一个文本框中写一样,同时使用jQuery或AngularJS将其绑定在其他文本框中。

#4


1  

You can't, and you really shouldn't... That's like asking you to read a book while watching TV.

你不能,而你真的不应该...这就像是在看电视时要求你读一本书。

However, that sort of thing, might be possible on multi-user & multi-touch OS machines. That is, two users on the same machine can work two different tasks simultaneously on the same surface. But that's military. And even than, one user, can only have one input focus at a time.

但是,在多用户和多点触控操作系统机器上可能会出现这种情况。也就是说,同一台机器上的两个用户可以在同一表面上同时处理两个不同的任务。但那是军事上的。甚至比一个用户一次只能有一个输入焦点。

#5


0  

I found http://codepen.io/keilin/pen/lCkap for css.

我为css找到了http://codepen.io/keilin/pen/lCkap。

And added:

$("#left").on('keydown change', function(e) {
        $("#right").val($(this).val());
        console.log($("#right").val());
        $overlay.text($(this).val());
        var offset = $cursor.offset();
        var inputLeft = $(_this).offset().left;
        offset.left = Math.min($overlay.outerWidth(), $(_this).innerWidth() - 4);
        offset.left = inputLeft + Math.max(offset.left, 0);
        $cursor.offset(offset);
 });

If i understand correctly, you want something this: https://jsfiddle.net/8csab3t1/1/

如果我理解正确,你需要这样的东西:https://jsfiddle.net/8csab3t1/1/

ps: It's just an example. Please check with two chars.

ps:这只是一个例子。请检查两个字符。