Question

使用可疑的div区域，我遇到了问题（目前仅在Chrome中测试过），当CSS伪造选择器{{1}时，光标无法放置在内联样式元素的第一个字母之前}用于在＆＃34;标记＆＃34;。

之前添加内容

用例是这种技术用于在内容编辑器中显示/样式自定义标签。每个标记都被编入索引，并且此索引显示在标记文本的左侧。

独立示例：http://codepen.io/TheFoot/pen/pydqQb

提前致谢..

编辑：正如@Sonny所指出的那样，如果嵌入式标记为::before，问题就会消失，但这样就不需要突出显示/样式内联文本部分了。

Answer 1

我认为这里的问题是，$pendingArray = array(); $qty = 0; $selectParty = "SELECT *,categorynm FROM item JOIN category ON category.categoryId = item.categoryId ORDER BY item.itemId"; $selectPartyRes = mysql_query($selectParty); while($row = mysql_fetch_array($selectPartyRes)) { $pendingArray[$row['itemId']]['itemId'] = $row['itemId']; $pendingArray[$row['itemId']]['itemNm'] = $row['itemNm']; $pendingArray[$row['itemId']]['qty'] = 0; $pendingArray[$row['itemId']]['kgqty'] = 0; $pendingArray[$row['itemId']]['kgpcs'] = 0; $pendingArray[$row['itemId']]['ing'] = 0; $slectIssue = "SELECT SUM(qty) AS kgqty FROM tableorderdetail JOIN item ON item.itemId = tableorderdetail.itemId JOIN tableorder ON tableorder.tableorderId = tableorderdetail.tableorderId WHERE unit = 'KG' AND tableorderdetail.itemId = ".$row['itemId']." AND categoryId = 1 AND (status = 'Y' OR status = 'N') GROUP BY item.itemId"; $slectIssueRes = mysql_query($slectIssue); while($irow = mysql_fetch_array($slectIssueRes)) { $pendingArray[$row['itemId']]['tableorderdetailId'] = $irow['tableorderdetailId']; $pendingArray[$row['itemId']]['kgqty'] += round($irow['kgqty'],2); } $slectIssue = "SELECT SUM(qty) AS kgpcs FROM tableorderdetail JOIN item ON item.itemId = tableorderdetail.itemId JOIN tableorder ON tableorder.tableorderId = tableorderdetail.tableorderId WHERE unit = 'PCS' AND tableorderdetail.itemId = ".$row['itemId']." AND categoryId = 1 AND (status = 'Y' OR status = 'N') GROUP BY item.itemId"; $slectIssueResi = mysql_query($slectIssue); while($irow = mysql_fetch_array($slectIssueResi)) { $pendingArray[$row['itemId']]['kgpcs'] += $irow['kgpcs']; $pendingArray[$row['itemId']]['inKg'] += $irow['kgpcs']/10; $pendingArray[$row['itemId']]['ing'] = $pendingArray[$row['itemId']]['kgqty']+ $pendingArray[$row['itemId']]['inKg']; } $kgQtys += $pendingArray[$row['itemId']]['kgqty']; $allQty += $pendingArray[$row['itemId']]['ing']; $kgPcs += $pendingArray[$row['itemId']]['kgpcs'];是可信的<tr> <th>Item Name</th> <th>Qty</th> <th>Pcs</th> <th>Totoal </th> </tr> {foreach from=$pendingArray item=onerow} {if $onerow.kgqty gt 0 || $onerow.kgpcs gt 0} <tr> <td align="center">{$onerow.itemNm}</td> <td align="center">{$onerow.kgqty}</td> <td align="center">{$onerow.kgpcs}</td> <td align="center">{$onerow.ing}</td> </tr> {/if} {/foreach}。 contenteditable应仅适用于块级元素（不包括标题）。

一些人提到的指南是仅阻止级别元素应该是满足的。但是，Mozilla 开发者网络将标题元素h1到h6列为块级元素，并使标题元素成为可信的 Firefox4中的bug可能会导致Chrome5中的页面崩溃。

您可以在此处阅读此答案中的更多信息： Which elements can be safely made contenteditable?

Answer 2

听起来像一只小绿虫让你发疯了呃？无论如何。我估计你通过javascript插入TAG，所以你必须有某种功能吗？一个快速而肮脏的解决方案可能是在标记打开之前将一个不可见的字符添加到该函数中。例如，

<div class="tag" data-idx="6">&#x2063;maturity...</div>

或者您可以复制并粘贴实际角色（您可以在这些箭头之间找到：

--->⁣<---

因为它是不可见的，它可以模拟你所需要的。

[编辑：

如果你想重新使用不可见的字符，以防用户将其删除。：）

$('.editor').keyup(function (e) { 
    if( e.which == 8 ) {
         $('.tag')
            .filter( (i,v) => { return $(v).text().match(/^⁣/) == null })
            .prepend("⁣")
    }
})

http://codepen.io/anon/pen/wddoBN

Contenteditable，::选择器样式和光标位置问题

2 个答案: