标签: caret

我有一个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 解决方案。

我在我的程序中使用了一些JFormattedTextFields.由于某些原因,当单击文本字段后文本字段获得焦点时,插入符号位置始终跳转到左侧(位置0).我希望插入符号最终位于用户点击的位置.因此,如果我在两个数字之间点击,则插入符应该在这两个数字之间.

所以我实现了一个FocusListener,它将获得点击位置并在那里设置插入位置.

FocusListener focusListener = new FocusListener(){


    public void focusGained(FocusEvent evt) {

        JFormettedTextField jftf = (JFormattedTextField) evt.getSource();

        //This is where the caret needs to be.
        int dot = jftf.getCaret().getDot(); 

        SwingUtilities.invokeLater( new Runnable() {

        public void run() {
'the textField that has focus'.setCaretPosition('Some how get the evt or dot');              
              }
           });
        }

    public void focusLost (FocusEvent evt) {}

    });

我尝试了很多让他上班的事情.我尝试过使用final关键字,但是只能用于单个文本字段.

我在焦点监听器中使用了set/get方法来分配当前对象,但我不确定如何使其"安全"(例如,它们是否需要同步？).

也许有一些我想念的东西？

如果该字段没有焦点,是否可以(可靠地)在输入文本框中获取所选文本/插入符号位置？

如果没有,获取和保留这些数据的最佳方法是什么？

基本上,当用户单击按钮时,我想在插入符号位置插入一些文本.但是,只要用户单击该按钮,该字段就会失去焦点而我会丢失插入位置.

我希望在我的网页的文本字段中有一个自定义文本插入符号.我想要一个旧的学校块式闪烁插入符号.这可能吗？

我有这个标记

<div contentEditable="true">
    Some other editable content
    <div class="field" contentEditable="false">
        <span class="label">This is the label</span>
        <span class="value" contentEditable="true">This is where the caret is</span>
    </div>
    <!-- This is where I want the Caret -->
</div>

插入符号目前处于.field跨度.

我需要移动回出来后的.field父contentEditable.

如何通过javascript(如果需要使用jQuery)来实现？

当插入符号位于.value范围内时,它将尝试在keydown事件上触发它,如图所示.

现在完成我的自定义菜单弹出,但问题是,如果我选择一些文本JTextField并单击鼠标按钮显示弹出菜单,然后焦点转移到弹出窗口,之前选定的文本不再突出显示.焦点重新开始时JTextField- 所选文本将再次突出显示.如何在焦点丢失时突出显示所选文本？

摘要:

我试图实现这样的效果:当用户键入a (或[在内容可编辑时div,第二个)或]自动插入,并且插入符号位于它们之间,即(和之间).

小提琴

键入--s 的右侧,并查看它在第一行中的工作方式,而在第二行中不起作用.

我的努力:

我正在使用此代码(由Tim Down)来突出显示文本的某些部分并设置光标位置.前者有效但后者没有:(

function getTextNodesIn(node) { // helper
    var textNodes = [];
    if (node.nodeType == 3) {
        textNodes.push(node);
    } else {
        var children = node.childNodes;
        for (var i = 0, len = children.length; i < len; ++i) {
            textNodes.push.apply(textNodes, getTextNodesIn(children[i]));
        }
    }
    return textNodes;
}

function highlightText(el, start, end) { // main
    if (el.tagName === "DIV") …

我正在尝试使用拟合随机森林模型caret。我的训练数据重量为129MB，我正在具有8核和52GB RAM的Google Cloud上进行计算。我正在使用的代码如下：

library(caret)
library(doParallel)
cl <- makeCluster(3, outfile = '')
registerDoParallel(cl)
model <- train(x = as.matrix(X_train),
               y = y_train,
               method = 'rf', 
               verbose = TRUE,
               trControl = trainControl(method = 'oob',
                                        verboseIter = TRUE,
                                        allowParallel = TRUE),
               tuneGrid = expand.grid(mtry = c(2:10, 12, 14, 16, 20)),
               num.tree = 100,
               metric = 'Accuracy',
               performance = 1)
stopCluster(cl)

尽管有8个内核，但任何尝试使用3个以上内核的makeCluster结果都会导致以下错误：

unserialize（socklist [[n]]）中的错误：从连接读取错误

因此，我认为也许内存分配存在问题，并且仅使用3个内核进行了尝试。经过数小时的培训，当我期望获得结果时，令我惊讶的是，唯一的错误是以下错误：

错误：无法分配大小为1.9 Gb的向量

尽管如此，我的Google云端实例仍具有52GB的内存，因此我决定检查其中有多少是当前可用的。

as.numeric(system("awk '/MemFree/ {print $2}' /proc/meminfo", intern=TRUE))

[1] 5606656

大于47GB。因此，假设在培训结束时无法分配2GB，则似乎随机培训森林使用了45GB以上。我知道我的训练数据集被引导100次以生成一个随机森林，因此100份训练数据副本的重量约为13GB。同时，我的总RAM分为3个群集，这给了我39GB的内存。它应该给我留下约6GB的内存，但显然没有。不过，这仍然是假设在构建分离的树之后没有释放任何内存，我怀疑情况是否如此。

因此，我的问题是：

1. 我的近似计算还可以吗？
2. 什么可能导致我的错误？
3. 我该如何估计我的训练数据需要多少RAM来训练模型？

我正在尝试在 React 中设置一个控件contentEditable。每次我在 div 中写入内容时，组件都会重新渲染，并且光标/插入符会跳回开头。我试图通过将光标保存在onInput回调中来处理这个问题：

import { useState, useEffect, useRef, useLayoutEffect } from 'react'

function App() {
    const [HTML, setHTML] = useState()
    const [selectionRange, setSelectionRange] = useState()
    console.log('on rerender:', selectionRange)

    useLayoutEffect(() => {
        console.log('in layout effect', selectionRange)
        const selection = document.getSelection()
        if (selectionRange !== undefined) {
            selection.removeAllRanges()
            selection.addRange(selectionRange)
        }
    })

    function inputHandler(ev) {
        console.log('on input', document.getSelection().getRangeAt(0))
        setSelectionRange(document.getSelection().getRangeAt(0).cloneRange())
        setHTML(ev.target.innerHTML)
    }

    return (
        <>
            <div
                contentEditable
                suppressContentEditableWarning
                onInput={inputHandler}
                dangerouslySetInnerHTML={{ __html: HTML }}
            >
            </div>
            <div>html:{HTML}</div>
        </>
    )
} …

我一直在尝试使用 bootstrap 4 从 NavDropdown 组件中删除插入符号并做出反应，但是我没有运气。这是我的反应和CSS，不知道出了什么问题。谢谢。

<Navbar expand="lg">
        <Navbar.Toggle aria-controls="basic-navbar-nav" />
        <Navbar.Collapse id="basic-navbar-nav">
          <Nav className="mr-auto">
          <NavDropdown title="ENGAGEMENT" id="basic-nav-dropdown" show={false} className="noCaret">
              <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
              <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
              <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
              <NavDropdown.Divider />
              <NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
            </NavDropdown>
          </Nav>
        </Navbar.Collapse> 
</Navbar>

.caret {
  display: none !important;
}

.navbar .dropdown-menu:after{
  display:none !important;
 }

 .dropdown-toggle.noCaret:after {
  display: none !important;