时间戳

首页 > 解决方案 > jQuery append on contenteditable 添加不可见字符

jquery - jQuery append on contenteditable 添加不可见字符

问题描述

我有一个 SQLite3 SQL 提示符，可以通过在右侧列表中单击它来附加表/列名。
嗯，这就是我想要它做的。由于我不明白的错误，我被迫禁用此功能。

如果我手动输入请求，一切正常。但是，如果我使用按钮添加“表”，我会从 SQLite 收到此错误：

在“SELECT * FROM `table`”中：“FROM”附近：语法错误

附加文本甚至不会发生此错误！

但是输入在视觉上是相同的。在控制台和 HTML 树（检查器）中也是如此。不显示特殊字符。
由于允许我访问以前的 SQL 输入的小下拉菜单，我可以检查是否有一个不可见的字符。访问错误输入并再次运行后，错误仍然存​​在。

这是 HTML 和 Javascript，因此您可以看到我想要做什么并且没有明显的区别：

$('i').click(function() {
    $('#sql-input').append('`' + $(this).data('value') + '`');
});

$('#sql-form').submit(function(e) {
    e.preventDefault();
    console.log($("#sql-input").text());
    /*
        Here is the ajax request to execute the SQL
    */
});
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<form id="sql-form" action="" method="post">
    <label for="sql-input">SQL PROMPT</label>
    <br />
    <div id="sql-input" style="height: 80px; width: 150px; border: solid 1px black;" contenteditable></div>
    <br />
    <input type="submit" value="send" />
    <button type="button" onclick="console.clear();">clear console</button>
</form>
<div class="list">
    <ul style="cursor: pointer;">
        <li><i data-value="table1">table1</i></li>
        <li><i data-value="col1_1">col1_1</i></li>
        <li><i data-value="col2_1">col2_1</i></li>
        <li><i data-value="col3_1">col3_1</i></li>
        <li><i data-value="table1">table2</i></li>
        <li><i data-value="col1_2">col1_2</i></li>
    </ul>
</div>

不过，奇怪的是，如果我触摸 JQuery 输入的文本，错误就会消失。

我已经尝试过的：

删除引号：`table` => table
使用$().text()or$().html()代替$().append()

标签： jqueryhtmlsqliteappend

解决方案

推荐阅读