标签: caret

我正在研究一个jQuery插件,它允许你做@username样式标签,就像Facebook在状态更新输入框中做的那样.

我的问题是,即使经过数小时的研究和实验,简单地移动插入符号似乎也很难.我已经设法<a>用某个人的名字注入标签,但是把它放在它之后似乎是火箭科学,特别是如果它应该在所有浏览器中都可以使用.

我还没有考虑用@username标签替换打字的文本,而不是像我现在正在做的那样注入... lol

关于在Stack Overflow上使用contenteditable的问题有很多问题,我想我已经阅读了所有这些问题,但它们并没有真正涵盖我需要的内容.所以任何人都可以提供的信息会很棒:)

我正在尝试在我正在编写的当前程序中实现一个功能,我想学习如何向下滚动到JTextArea中的特定文本.例如,假设我有以下内容:

JTextArea area = new JTextArea(someReallyLongString);

someReallyLongString表示一个段落,或一段非常大的文本(其中垂直滚动条可见).所以我要做的是向下滚动到该文本区域内的特定文本.例如,假设someReallyLongString在滚动条的中间附近包含单词"the"(意味着这个单词不可见),我将如何向下滚动到该特定文本？

谢谢,任何帮助都会非常感激.

是否存在从不同元素在每个浏览器中获取插入位置和/或选择的完整解决方案.我正在寻找一个我可以执行的解决方案,例如mGetCaretPosition(iControl)将返回其内部元素的插入位置.

我尝试了很多功能:

• selection (window/document) [document=IE, window=Opera]
• getSelection (window/document) [document=Firefox, document=Chrome, document=Safari]
• selectionStart (input/textarea) [All]
• craeteRange (selection)
• createTextRange (selection)

调用document.selection.createRange().text这样的方法不会返回插入位置,因为它没有选择.设置tRange.moveStart('character', - X)时,X不是已知值.当你在div中使用它并且插入符号位于中间时它会占用div之前的代码.

在Safari或Firefox中将文本输入到可信范围内时,插入符号会在每个按键上移动到开头.只有在React重新/渲染组件时才会发生这种情况.

Chrome工作得很好.没有测试IE.

|插入符号和键入的示例Hello:

| |H |eH |leH |lleH |olleH

这是我的组件的简化版本:

import React, { Component } from 'react';

class ContentEditable extends Component {
    constructor(props) {
        super(props);

        this.state = {
            value: props.value
        };
    }

    createMarkup() {
        return { __html: this.state.value };
    }

    handleInput(event) {
        this.setState({
            value: event.target.innerText
        });
    }

    isValid() {
        let bestLength = 3;

        return this.state.value.length > bestLength;
    }

    render() {
        let className = '';
        if (this.isValid()) {
            className = 'is-valid';
        }

        return (
            <span
                contentEditable="true"
                onInput={ this.handleInput.bind(this) …

我正在使用,Avalon text editor并且键和音频位置没有因按键向上和按键而改变.任何人都可以建议我如何克服这个问题？

键右右导航的光标位置正确变化.

我还检查了键盘事件中插入符号的值,并且对于上下键按下它没有改变.

我有 textarea，我想更改说明插入符号（光标）后面的字符的文本。

<textarea id="text"></textarea>
<br/>
Character after the caret: <span id="char"></span>

我知道如何获得插入符号位置。问题是我不知道当用户移动插入符号时会调用什么事件（通过键入、按箭头键、单击、粘贴文本、剪切文本等）。

我希望将插入符号正好位于其当前位置前方四个位置,以便我可以正确插入一个标签.我已经在插入符号的位置处获得了HTML插入,但是当我插入HTML时,插入符号被遗忘.我花了大约一个小时左右的时间看各种方法来做这件事,我已经尝试了很多,但我不能让他们中的任何一个为我工作.这是我尝试过的最新方法:

function moveCaret(input, distance) {
    if(input.setSelectionRange) {
        input.focus();
        input.setSelectionRange(distance, distance);
    } else if(input.createTextRange) {
        var range = input.createTextRange();
        range.collapse(true);
        range.moveEnd(distance);
        range.moveStart(distance);
        range.select();
    }
}

它绝对没有 - 不移动插入符,抛出任何错误或任何东西.这让我感到困惑.是的,我知道上面的方法集(应该)将插入符号从指定节点的开头(即input)开始设置在某个位置,但即使这样也不起作用.那么,我究竟做错了什么,我该怎么做呢？

编辑:基于ov提供的链接,我已经设法将一些东西拼凑在一起,最终做了一些事情:抛出一个错误.好极了!这是新代码:

this.moveCaret = function(distance) {
    if(that.win.getSelection) {
        var range = that.win.getSelection().getRangeAt(0);
        range.setStart(range.startOffset + distance);
    } else if (that.win.document.selection) {
        var range = that.win.document.selection.createRange();
        range.setStart(range.startOffset + distance);
    }
}

现在,这给出了错误Uncaught Error: NOT_FOUND_ERR: DOM Exception 8.有什么想法吗？

是否有方法返回JTextField中字符的位置.我的意思是,如果我有一个带有一些值的JTextField.例如,该字段包含值ABCDEFJ.用户决定将光标放在字符"C"之后,以输入新值.有没有一种方法可以获得进入新角色的位置.在这个例子中,这将返回3.

我通过覆盖更改插入点大小-(void)drawInsertionPointInRect:(NSRect)aRect color:(NSColor *)aColor turnedOn:(BOOL)flag,但它不处理第一次闪烁(当您移动插入点时,它会恢复正常)

我设法通过重写私有方法来处理第一次闪烁- (void)_drawInsertionPointInRect:(NSRect)aRect color:(NSColor *)aColor.

但这对我来说不是一个解决方案,因为重写私有方法将导致App Store下降.我希望该应用程序在App Store中.我看到像iAWriter和Writeroom这样的应用程序有一个自定义插入点,它们在App Store中.

有谁知道他们是如何设法做到这一点,或者更好的方式而不是覆盖私有方法？

谢谢.

- (void)_drawInsertionPointInRect:(NSRect)aRect color:(NSColor *)aColor
{
    aRect.size.width = 3.0;
    [aColor set];
    [NSBezierPath fillRect:aRect];
}

- (void)drawInsertionPointInRect:(NSRect)aRect color:(NSColor *)aColor turnedOn:(BOOL)flag
{
    if(flag) {
        aRect.size.width = 3.0;
        [aColor set];
        [NSBezierPath fillRect:aRect];
    }
    else {
        [self setNeedsDisplayInRect:[self visibleRect] avoidAdditionalLayout:NO];
    }
}

我有一个contenteditable元素，我希望其中的元素在插入符号位于其中时应用样式。

在此示例中，样式更改为:hover：

div{
caret-color: red;
}

span:hover {
  font-weight:bold;
}

<div contenteditable="true">
  <span>Sub element one</span> 
  text node
  <span>sub element two</span>
</div>

在这里您可以看到插入符号，因为我将其设置为红色，但我将鼠标悬停在另一个上span：

有什么方法可以应用这样的样式，但是当插入符号位于元素内部时？span那么红线周围的文字是粗体吗？

解决方案如下所示：

CSS 解决方案是理想的，但如果不可能的话我会考虑 JS 解决方案。