相关疑难解决方法(0)
在html文本框中设置键盘插入位置
有人知道如何将文本框中的键盘插入符移动到特定位置吗？
例如,如果一个文本框(例如输入元素,而不是文本区域)中有50个字符,并且我想在插入字符20之前放置插入符号,那么我该如何处理呢？
这与这个问题不同:jQuery在文本区域设置光标位置,这需要jQuery.
推荐指数
解决办法
查看次数
contenteditable,在文本末尾设置插入符号(跨浏览器)
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>
我相信FF看起来像这样:
hey
<br />
what's up?
在IE中:
hey
<p>what's up?</p>
不幸的是,没有很好的方法来制作它,以便每个浏览器插入一个<br />而不是div或p-tag,或者至少我在网上找不到任何东西.
无论如何,我现在要做的是,当我按下按钮时,我希望将插入符号设置在文本的末尾,所以它应该看起来像这样:
hey
what's up?|
任何方式这样做,所以它适用于所有浏览器？
例:
$(document).ready(function()
{
$('#insert_caret').click(function()
{
var ele = $('#content');
var length = ele.html().length;
ele.focus();
//set caret -> end pos
}
}
推荐指数
解决办法
查看次数
获取范围的开始和结束偏移量相对于其父容器
假设我有这个HTML元素:
<div id="parent">
Hello everyone! <a>This is my home page</a>
<p>Bye!</p>
</div>
用户用鼠标选择"家".
我希望能够确定#parent他的选择中有多少个字符开始(以及#parent他选择结束时有多少个字符结束).即使他选择了HTML标记,这也应该有效.(我需要它在所有浏览器中工作)
range.startOffset 看起来很有希望,但它只是相对于范围的直接容器的偏移量,并且仅当容器是文本节点时才是字符偏移量.
推荐指数
解决办法
查看次数
在可信赖的插入位置上考虑```s
为了在一个contenteditable元素中获取和设置插入位置,我尝试了这个答案中的代码,但是当你移动到不同的文本节点时,开始和结束位置会重置.
<div contenteditable>012345<br><br><br>9012345</div>
所以,我修改了这个答案的代码(通过@TimDown),但它还没有完全正确地计算换行符...在这个演示中,当我点击4并按下右箭头三次后,我会看到开始/结束报告5,6,然后8.或者,使用鼠标从4第一行中选择并继续向右选择(请参阅gif)
这是代码(演示 ;即使它看起来像,jQuery 没有被使用)
function getCaret(el) {
let start, end;
const range = document.getSelection().getRangeAt(0),
preSelectionRange = range.cloneRange(),
postSelectionRange = range.cloneRange();
preSelectionRange.selectNodeContents(el);
preSelectionRange.setEnd(range.startContainer, range.startOffset);
postSelectionRange.selectNodeContents(el);
postSelectionRange.setEnd(range.endContainer, range.endOffset);
start = preSelectionRange.toString().length;
end = start + range.toString().length;
// count <br>'s and adjust start & end
if (start > 0) {
var node,
i = el.children.length;
while (i--) {
node = …推荐指数
解决办法
查看次数
在满足要素中的标记式自动完成和插入/光标移动
我正在研究一个jQuery插件,它允许你做@username样式标签,就像Facebook在状态更新输入框中做的那样.
我的问题是,即使经过数小时的研究和实验,简单地移动插入符号似乎也很难.我已经设法<a>用某个人的名字注入标签,但是把它放在它之后似乎是火箭科学,特别是如果它应该在所有浏览器中都可以使用.
我还没有考虑用@username标签替换打字的文本,而不是像我现在正在做的那样注入... lol
关于在Stack Overflow上使用contenteditable的问题有很多问题,我想我已经阅读了所有这些问题,但它们并没有真正涵盖我需要的内容.所以任何人都可以提供的信息会很棒:)
推荐指数
解决办法
查看次数
多个contentEditable,无法使用箭头键将carret移动到span的结尾
我有多个跨度,内容可编辑属性设置为true,如下所示:
<span contentEditable='true'> value</span><span contentEditable='true'> value</span><span contentEditable='true'> value</span>
https://jsfiddle.net/du7g39cz/
问题是当我使用箭头键在span元素中导航时,我无法到达单个跨度的末尾,因为当carret到达最后一个符号时会调用blur事件.
我可以在MS Edge之外的所有浏览器上重现此行为.
我必须注意,我不想只保留一个内容可编辑的父级,因为这很容易让用户删除整个段落,用法是让用户一次只能编辑一个单词.
推荐指数
解决办法
查看次数
如何使用html子元素在contenteditable div中获得插入位置？
我正在使用一个contenteditable div,可以选择在文本流中使用内联html元素,如标记.
在某些点我需要抓住插入位置,但是发现如果插入符号位于html子元素之后,使用示例代码返回的位置是不正确的.
我需要一个跨浏览器的解决方案,它允许我存储插入符的位置,以便即使文本流中存在html元素,也可以在一瞬间恢复它.
推荐指数
解决办法
查看次数
模拟退格按钮JS
我想创建一个自定义退格按钮,其逻辑与键盘上的"退格"按钮相同.我使用以下代码:
function backSpace()
{
var e = jQuery.Event("keyup");
e.which = 8; // # Some key code value
e.keyCode = 8;
$("mainDiv").trigger(e);
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" type="text/css" media="screen" />
<script src="formulas.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.js"></script>
<meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=no"/>
</head>
<button onclick="backSpace()">backSpace</button>
<body id="main" spellcheck="false">
<div id = "mainDiv" contenteditable="true"></div>
</body>
</html>但它不起作用.我不明白我做错了什么.我花了很多时间来解决这个问题,但我还没有解决它.请帮帮我.
推荐指数
解决办法
查看次数
使多个contenteditable表现得像一个文档
我有一堆垂直排列的多行可信div,我想通过箭头键在它们之间进行自然导航(就好像它是一个文档).为此,在keydown活动中我需要:
- 知道当前的插入符号行数和行数以确定是否需要向上移动(按下第一行和↑键)或向下(最后一行和↓键)
- 知道当前字符(显示的字符串中的位置)以确定是否需要向上移动(位置== 0和←键按下)或向下(位置== text.length和→按下)
- 当键被保持和未被释放时,该过程不应在开关元件之间停止(因此
keydown事件,不是keyup) - 优选:事件应该停止传播(例如,如果我在最后一行的第一列,我按↓键,它不应该跳到该行的最后一个字符,然后下去)
- 最好(真的很棒):在我们跳到下一个元素之后,我们不仅仅是
.focus()元素,而是模仿与我们之前相同的垂直位置的点击,这样它会感觉自然,就像在文本编辑器中一样.
我迄今发现的所有脚本/库都没有完成我需要的所有东西或错误.请在您的建议中包含演示,以便我可以先测试而不在我的代码中进行测试.谢谢!
更新:视觉解释 - 请注意,有两个以上的div,最后一行的'向下箭头键'只是四个触发器中的一个
推荐指数
解决办法
查看次数
替换 <div contenteditable="true"> 的innerHTML 时修复光标位置
<div id="richTextBox" contenteditable="true"></div>在每次击键时其innerHTML 更改的内部键入时，将光标保持在正确位置的最佳方法是什么？替换innerHTML 的行为弄乱了光标位置。
我更改innerHTML 的原因是因为我添加了<span>标签。它是代码高亮程序的一部分。跨度标签允许我放置正确的颜色亮点。
我目前正在使用 StackOverflow 答案中的以下代码作为创可贴，但它有一个重大错误。如果您按Enter 键，光标会停留在旧位置，或移动到随机位置。那是因为该算法从光标开始计算了多少个字符。但它不会将 HTML 标签或换行符视为字符。并且 RichTextBox 插入<br>以进行输入。
修复思路：
- 修复下面的代码？见小提琴
- 替换为更简单的代码？我尝试了一堆涉及
window.getSelection()and的更简单的东西document.createRange()，但我无法让它发挥作用。 - 替换为没有此错误的 RichTextBox 库或模块？
截屏
// Credit to Liam (Stack Overflow)
// https://stackoverflow.com/a/41034697/3480193
class Cursor {
static getCurrentCursorPosition(parentElement) {
var selection = window.getSelection(),
charCount = -1,
node;
if (selection.focusNode) {
if (Cursor._isChildOf(selection.focusNode, parentElement)) {
node = selection.focusNode;
charCount = selection.focusOffset;
while (node) {
if (node === parentElement) {
break;
}
if …推荐指数
解决办法
查看次数
标签 统计
javascript ×10
caret ×4
cursor ×3
html ×3
ecmascript-6 ×1
input ×1
jquery ×1
richtextbox ×1
textbox ×1
textrange ×1
wysiwyg ×1