Conteneditable löscht und bearbeitet das Symbol im Feld auch

Question

Ich verwende contenteditable in meiner Tabelle, und jedes td, wenn mit Javascript erstellt wird contenteditable="true" gesetzt.

Das Problem ist, ich möchte ein ICON in das Feld hinzufügen, das 'TOTAL' sagt, und erlauben Sie dem Benutzer, Daten zu ändern, aber mit contenteditable es sogar ihnen zu erlauben, das Symbol zu bearbeiten/zu löschen!

Ich möchte das Symbol dort bleiben und nicht bearbeiten oder ändern. Gibt es eine Möglichkeit, span oder Symbol in editierbaren TD mit JavaScript oder CSS zu beheben?

Beispiel:

<table> 
 
<thead> 
 
    <tr> 
 
    <th>TOTAL</th> 
 
    </tr> 
 
</thead> 
 
<tbody> 
 
    <tr> 
 
    <td contenteditable="true"><span>$</span>887</td> 
 
    </tr> 
 
</tbody>

Answer 1

Bewegen Sie den contenteditable auf eine andere Spanne, die das Bild nicht enthalten:

<table> 
 
<thead> 
 
    <tr> 
 
    <th>TOTAL</th> 
 
    </tr> 
 
</thead> 
 
<tbody> 
 
    <tr> 
 
    <td>$<span contenteditable="true">887</span></td> 
 
    </tr> 
 
</tbody>