JavaScript中focus()方法致单元格值回退的原因及纯JS解决方案

Hey there! Let's figure out why your cell's innerHTML is rolling back after calling focus() and fix it with plain JavaScript.

The core issue here is browser default behavior interfering with your custom logic, especially if your cells are set to contenteditable="true" (which they likely are for Excel-like editing). Here's the breakdown:

• When you click a contenteditable element, browsers automatically initialize an editing context behind the scenes. This includes capturing the element's current content before your click event runs.
• If you first update the cell's innerHTML and then call focus(), the browser's default editing setup might kick in after your code runs and reset the content to what it captured initially—undoing your changes.
• Event execution order can also play a role: the browser's native click handler (which handles editing activation) might run after your custom click handler, overwriting your modified content.

We have a few solid approaches to work around this, depending on your needs:

1. Block the Browser's Default Click Behavior First #

The most straightforward fix is to prevent the browser's native click behavior from running, which stops it from capturing the original content and resetting it later.

// Assume your cells have the class "excel-cell"
document.querySelectorAll('.excel-cell').forEach(cell => {
  cell.addEventListener('click', (e) => {
    // Stop the browser's default editing initialization
    e.preventDefault();

    const expression = cell.getAttribute('expression');
    if (expression) {
      // Set the expression as the cell's content
      cell.innerHTML = expression;
      // Focus the cell now that we've overridden the default behavior
      cell.focus();
    }
  });
});

Note: #

If you need the cell to remain fully editable after this, this approach still works—preventDefault() only blocks the initial default click behavior, not the ability to edit once focused.

2. Adjust the Order: Focus First, Then Update Content #

If preventing default behavior causes unexpected side effects (like broken cursor positioning), you can reverse the order: focus the cell first, then update its content. This ensures the browser's editing context is initialized with your new content instead of the original.

document.querySelectorAll('.excel-cell').forEach(cell => {
  cell.addEventListener('click', () => {
    const expression = cell.getAttribute('expression');
    if (expression) {
      // Focus the cell first to initialize the editing context
      cell.focus();
      // Update the content now that the context is ready
      cell.innerHTML = expression;

      // Optional: Move the cursor to the end of the content for better UX
      const range = document.createRange();
      const selection = window.getSelection();
      range.selectNodeContents(cell);
      range.collapse(false); // Collapse to the end of the content
      selection.removeAllRanges();
      selection.addRange(range);
    }
  });
});

3. Use mousedown Instead of click for Earlier Interception #

Sometimes the browser's editing setup starts as early as the mousedown event (before click fires). In that case, handling the logic in mousedown and focusing in click can avoid conflicts entirely:

document.querySelectorAll('.excel-cell').forEach(cell => {
  cell.addEventListener('mousedown', (e) => {
    // Block default behavior at the mousedown stage to stop early editing setup
    e.preventDefault();

    const expression = cell.getAttribute('expression');
    if (expression) {
      cell.innerHTML = expression;
    }
  });

  // Focus the cell on click to trigger editing mode
  cell.addEventListener('click', () => {
    cell.focus();
  });
});

Double-check that your cells have contenteditable="true" set. Without this, focus() won't work as expected, and the browser won't treat the element as an editable field in the first place:

<td class="excel-cell" expression="=A1+B1" contenteditable="true">3</td>

内容的提问来源于stack exchange，提问作者bezoadam