使用jQuery,我如何获得具有插入符号(光标)焦点的输入元素?
或者换句话说,如何确定输入是否具有插入符号的焦点?
如何在<textarea>使用JavaScript中获得插入位置?
例如: This is| a text
这应该回来了7.
如何让它返回光标/选择周围的字符串?
例如:'This is', '', ' a text'.
如果突出显示"是"一词,那么它将返回'This ', 'is', ' a text'.
我以这个简单的HTML为例:
<div id="editable" contenteditable="true">
text text text<br>
text text text<br>
text text text<br>
</div>
<button id="button">focus</button>
Run Code Online (Sandbox Code Playgroud)
我想要简单的事情 - 当我点击按钮时,我想将插入符号(光标)放入可编辑div中的特定位置.通过网络搜索,我将这个JS附加到按钮点击,但它不起作用(FF,Chrome):
var range = document.createRange();
var myDiv = document.getElementById("editable");
range.setStart(myDiv, 5);
range.setEnd(myDiv, 5);
Run Code Online (Sandbox Code Playgroud)
是否可以像这样设置手动插入位置?
我找到了很多关于如何在contentEditable DIV中设置光标或插入位置的好的,交叉浏览器的答案,但是没有关于如何获取或找到它的位置......
我想要做的是在关键字中知道该div中插入符号的位置.
因此,当用户输入文本时,我可以随时知道其光标在div中的位置.
编辑:我在div内容(文本)中寻找INDEX,而不是光标坐标.
<div id="contentBox" contentEditable="true"></div>
$('#contentbox').keyup(function() {
// ... ?
});
Run Code Online (Sandbox Code Playgroud) Chrome中的输出:
<div id="content" contenteditable="true" style="border:1px solid #000;width:500px;height:40px;">
hey
<div>what's up?</div>
<div>
<button id="insert_caret"></button>
Run Code Online (Sandbox Code Playgroud)
我相信FF看起来像这样:
hey
<br />
what's up?
Run Code Online (Sandbox Code Playgroud)
在IE中:
hey
<p>what's up?</p>
Run Code Online (Sandbox Code Playgroud)
不幸的是,没有很好的方法来制作它,以便每个浏览器插入一个<br />而不是div或p-tag,或者至少我在网上找不到任何东西.
无论如何,我现在要做的是,当我按下按钮时,我希望将插入符号设置在文本的末尾,所以它应该看起来像这样:
hey
what's up?|
Run Code Online (Sandbox Code Playgroud)
任何方式这样做,所以它适用于所有浏览器?
例:
$(document).ready(function()
{
$('#insert_caret').click(function()
{
var ele = $('#content');
var length = ele.html().length;
ele.focus();
//set caret -> end pos
}
}
Run Code Online (Sandbox Code Playgroud) 今天我在python中遇到了插入操作符并尝试了它,我得到了以下输出:
>>> 8^3
11
>>> 8^4
12
>>> 8^1
9
>>> 8^0
8
>>> 7^1
6
>>> 7^2
5
>>> 7^7
0
>>> 7^8
15
>>> 9^1
8
>>> 16^1
17
>>> 15^1
14
>>>
Run Code Online (Sandbox Code Playgroud)
它似乎基于8,所以我猜是某种字节操作?我似乎找不到很多关于这个搜索网站的信息,除了它对于浮点数表现得很奇怪,是否有任何人有这个运算符的链接或者你能解释一下吗?
当我第一次打开窗口时,我尝试将插入符/光标位置设置为WPF文本框中字符串值的末尾.当我的窗口打开时,我使用FocusManager在我的文本框上设置焦点.
似乎没什么用.有任何想法吗?
注意,我使用的是MVVM模式,我只从代码中包含了一部分XAML.
<Window
FocusManager.FocusedElement="{Binding ElementName=NumberOfDigits}"
Height="400" Width="800">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBox Grid.Column="0" Grid.Row="0"
x:Name="NumberOfDigits"
IsReadOnly="{Binding Path=IsRunning, Mode=TwoWay}"
VerticalContentAlignment="Center"
Text="{Binding Path=Digits, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>
<Button Grid.Column="0" Grid.Row="1"
Margin="10,0,10,0"
IsDefault="True"
Content="Start"
Command="{Binding StartCommand}"/>
</Grid>
</Window>
Run Code Online (Sandbox Code Playgroud) 我以前一直试图问这个,没有任何运气解释/证明一个错误发生的工作示例.所以这是另一个尝试:
我试图在一个可信的DIV上复制一个占位符效应.核心概念很简单:
<div contenteditable><em>Edit me</em></div>
<script>
$('div').focus(function() {
$(this).empty();
});
</script>
Run Code Online (Sandbox Code Playgroud)
这可能有些工作,但如果占位符包含HTML,或者正在进行其他处理,则可删除可编辑DIV的文本插入符,并且用户必须重新单击可编辑的DIV才能开始键入(即使它是仍然是焦点):
示例:http://jsfiddle.net/hHLXr/6/
我不能在处理程序中使用焦点触发器,因为它将创建一个事件循环.所以我需要一种方法来重新设置可编辑DIV中的插入符光标,或者以其他方式重新聚焦.