Question

我试图将一个范围放在一个可信的元素中，这个元素代表一个标记/分隔符：

＆＃13;

.tag {
  display:block;
  background-color:red;
}

.edit-box{
  border: 1px solid black;
  padding: 10px;
}

＆＃13;

<div id="test" contenteditable="true" class="edit-box">
    <span class="tag" contenteditable="false">NON EDITABLE</span>How to style the span element so it's possible to place the cursor at the start?
</div>

＆＃13;

我试图在span元素之前和之后编辑文本，但是不可能将光标放在元素之前。任何想法如何设置span元素的样式以允许更灵活的光标移动它。

FIDDLE

Answer 1

使用以下样式：

.tag {
  display:inline-block;
  width:100%;
  background-color:red;
}

Answer 2

尝试抑制用于编辑范围内容的事件。我被迫将span和div元素分开，但它在IE11中正常工作，即使它们在一起。我估计，在其他浏览器中存在拦截问题。但这个想法似乎很清楚。你唯一要做的就是改变自己的风格，使之显示出来。

＆＃13;

.tag {
  display:block;
  background-color:red;
}

.edit-box{
  border: 1px solid black;
  padding: 10px;
}

＆＃13;

<span class="tag" contenteditable="true" onkeydown="return handle(event)">NON EDITABLE</span>
<div id="test" contenteditable="true" class="edit-box">How to style the span element so it's possible to place the cursor before?
</div>

＆＃13;

import javax.swing.*;
import java.awt.*;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;



public class ex1 extends JFrame {
JLabel label;
JTextField r, g, b;

public ex1() {
    //panels to hold information
    JPanel bottomPanel = new JPanel();
    JPanel upperPanel = new JPanel();

    //fields that will hold the colour values
    r = new JTextField("Red", 10);
    g = new JTextField("Green", 10);
    b = new JTextField("Blue", 10);

    //add to frame
    bottomPanel.add(r);
    bottomPanel.add(g);
    bottomPanel.add(b);
    add(bottomPanel, BorderLayout.SOUTH);
    add(upperPanel, BorderLayout.CENTER);
    label = new JLabel("CE203 Assignment 1, submitted by:");
    label.setForeground(new Color(255, 0, 0));
    JButton button = new JButton("Enter");
    upperPanel.add(label);
    bottomPanel.add(button);
    button.addActionListener(new ButtonHandler(this));
}

public JLabel getLabel() {
    return label;
}

class ButtonHandler implements ActionListener {
    private ex1 assignment1;
    public ButtonHandler(ex1 assignment1) {
        this.assignment1 = assignment1;
    }
    @Override
    public void actionPerformed(ActionEvent e) {
        int r1 = Integer.parseInt(assignment1.r.getText());
        int g1 = Integer.parseInt(assignment1.g.getText());
        int b1 = Integer.parseInt(assignment1.b.getText());
        assignment1.getLabel().setForground(new Color(r1, g1, b1));
    }
}

public static void main(String[] args) {
    JFrame frame = new ex1();
    frame.setSize(400, 400);
    frame.setDefaultCloseOperation(ex1.EXIT_ON_CLOSE);
    frame.setVisible(true);
}
}

＆＃13;

HTML5 contenteditable - 将光标放在不可编辑的显示块元素之前

2 个答案: