标签: caret

我有一个textarea,当我点击它时,我想将插入符号移动到最后一个字符 Something[caret]

function moveCaret(){
     // Move caret to the last character
}

<textarea onclick="moveCaret();">
     Something
</textarea>

据我所知,TextRange对象在某种程度上是可行的,但我真的不知道如何使用它

编辑:我很想看到纯粹的JavaScript解决方案,所以没有图书馆请.

好吧,我一直在网上寻找一个解决方案,但我找不到一个,有没有办法在可编辑div中的插入位置之前得到这个词,所以有点像:

This is some| demo texts

这应该返回"some"这个词......我不知道这是否可能,我会很高兴得到任何帮助,谢谢:).

虽然我可以打开Rewrite Logging并弄乱这个规则来弄清楚它做了什么(如果有的话),我打赌有人已经知道了.这是规则本身:

RewriteRule ^ - [L]

这是在上下文中:

RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]

我想这意味着"匹配一切".我曾经认为"匹配一切"将是一个点,使得更明显的是没有丢失的代码,并且如果插入符号是唯一的东西,则正则表达式会出错.所以我看到外面的机会,这意味着别的东西.

我知道Mobile Safari在"动量"(-webkit-overflow-scrolling:touch;)滚动时不会触发事件.但这并不是完全相同的事情,因为Safari在内部处理输入的(闪烁)插入符号.

<div id="container">
    <input type="text" />
    <div class="filling"></div>
</div>

#container {
    position: absolute;
    top: 20px;
    bottom: 20px;
    width: 50%;
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
    border: 1px solid black;
}

input {
    margin-top: 60vh;
}

.filling {
    height: 200vh;
}

在您的设备上尝试这个小提琴(关注输入然后滚动):https://jsfiddle.net/gabrielmaldi/n5pgedzv

当你按下手指时(即不仅在给动量和释放时)也会发生这个问题:插入符不能滚动.

显然我不想关闭溢出滚动,如果没有办法修复插入符号以便它正确滚动,可以隐藏它.

谢谢

作为参考,我使用的是Vue 2.0,Vuex和Firebase.

我正在使用v-html绑定构建一个contenteditable组件来呈现innerHTML.数据在KeyUp上更新.每当数据更新时,DOM元素都会刷新"new"数据,导致插入符/光标跳回到contenteditable div的开头.

我已经研究过Rangy和其他一些stackoverflow解决方案,但我觉得最简单的解决方案是从数据刷新中取消绑定DOM元素.我希望数据仍然在firebase中更新,但不会导致元素刷新.

有没有办法让我仍然使用v-html但阻止DOM元素刷新数据？或者有没有另一种方法来呈现HTML而不自动绑定？

编辑:11/18/16

所以我继续努力解决这个问题.这是我目前的想法.

1. 使用生命周期钩子并停止组件重新渲染.我查看了Vue文档,但似乎无法找到阻止循环的东西.
2. 使用React的"componentShouldRender"之类的东西.同样,它看起来并不像Vue.js在生命周期中具有可比较的方法.

如果有人知道任何结束生命周期的方法,停止重新渲染,或者从vue中获取React的"componentShouldRender"功能的方法,这应该足以解决这个问题.

-

更新:11/29/16

这个更新有点迟了.我在Github上用Vue 记录了一个功能请求.

问题讨论中有一些JSFiddles可以提供潜在的解决方案.然而,我认为他们都没有资格作为一个完整的解决方案.最有希望的一个最近产生了更多的问题.

所有这些问题都是添加componentShouldRender生命周期钩子的问题.我将继续寻找完整的解决方案

我有一个满足感的div,就像这样:

<div id="test" contentEditable="true" style="width: 600px; height:300px;">Lorem ipsum dolor sit amet</div>

我使用以下代码:

<input type="button" value="Click me" onclick="alert(window.getSelection().focusOffset.toString());"></button>

当我在div中移动插入符号时单击按钮,返回div中插入符号的实际位置(偏移量).

问题是当我用输入类型=文本或密码控件替换contenteditable div,并保持contenteditable属性= true,然后单击按钮,我总是得到零.为什么是这样？

谢谢你的期待.

我这里有一个简单的Java问题.我想自动文本滚动到使用JTextArea创建的文本区域的最后一行的开头.文本区域的每行文本量远远长于文本区域的宽度.

这是我用来设置它的代码片段.

JTextArea textArea = new JTextArea();
DefaultCaret caret = (DefaultCaret)textArea.getCaret();
caret.setUpdatePolicy(DefaultCaret.ALWAYS_UPDATE);

现在的问题是,使用上面的代码,默认行为是插入符号自动定位到文档的末尾,因此,整个文本区域的开头部分超出了范围.我更喜欢自动滚动发生在文档最后一行的开头.

为清楚起见,这里有两个屏幕截图,

我想要的是第一个,但正在发生的是第二个.

在标记重复/下降之前看到

1. contenteditable div 不会有子元素
2. 我不想在div的末尾设置位置
3. 我不想要跨浏览器解决方案,只需要Chrome支持
4. 只有vanilla JS,没有库.

我见过很多解决方案.很多人都是Tim Down和其他人.但没有一个可行.我所看到的window.getSelection,.addRange等等,但没有看到他们在这里如何应用.

这是一个jsfiddle.

(试过)代码:

var node = document.querySelector("div");
node.focus();
var caret = 10; // insert caret after the 10th character say
var range = document.createRange();
range.setStart(node, caret);
range.setEnd(node, caret);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);

我有一个Windows CMD脚本,它接受许多参数并执行EXE,首先传递一些硬编码参数,然后传递用户的所有参数.CMD脚本如下所示:

launcher.exe paramX paramY %*

用户将从Windows shell执行CMD脚本,如下所示:

launcher.cmd param1 param2 param3 [...]

我的问题是,如果参数到CMD脚本包含壳等特殊字符< >和^,用户被迫通过前述各用3插入符号逸出这些^壳转义字符.

两个例子

1)要将参数传递ten>one给EXE,用户必须按如下方式启动CMD:

launcher.cmd ten^^^>one

这样做的原因是,shell特殊字符^,并>通过命令外壳在两个层面解释,首先在命令行和第二的CMD脚本中.因此,使用脱字符^外壳转义字符转义的shell必须应用两次.问题是这对用户来说并不明显,看起来很难看.

对于这个例子,一个更好的解决方案是用双引号括起参数.但是,这会分解为更复杂的示例,其中包含参数中的文字双引号.

2)要将参数传递"^给EXE,用户必须按如下方式启动CMD:

launcher.cmd "\"^^^^"

在我的情况下,我想支持包含任何低ASCII字符序列的参数,不包括控制字符,即代码点0x20到0x7E.我知道会有一些例子,用户必须使用插入符号来逃避某些shell特殊字符.但是,我不希望用户在这些情况下每次都必须使用3个插入符,因为它们恰好是在调用CMD脚本而不是EXE.

我可以通过使用执行相同操作的EXE替换CMD脚本来解决此问题.但是,有没有办法改变CMD脚本,以便它将参数传递给EXE而不解释shell特殊字符？

为了在一个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 = …