javascript - 将 Mottie 虚拟键盘附加到 ajaxcontroltoolkit 组合框

Question

当我在 ajaxcontroltoolkit 组合框中输入内容时，我试图显示 Mottie 虚拟键盘，有人有这方面的经验吗？我对 javascript/jquery 没有太多经验。

我正在尝试在 ASP.NET Webform 中执行此操作

我安装了所有 js 库，它可以在常规文本框或输入字段上工作，但我只是不知道如何将其连接到组合框或是否可以完成。

这是我正在编写的一段脚本:

<script type="text/javascript">
    $(document).ready(function () {
        $('#ComboBox1').keyboard({
                usePreview: false,
                autoAccept: true,
                enterNavigation: true,
                visible: function (e, keyboard, el) {
                    keyboard.$keyboard.prepend('<h2/>')
                        .draggable({
                            handle: "h2",
                            containment: "window"
                        });
                }
            })
            .addTyping();
    });
</script>

Answer 1

这是因为 ASP.NET AJAX Control Toolkit 创建的 ComboBox 输出如下 HTML:

<div id="ComboBox1" style="display:inline-block;">
  <table id="ComboBox1_Table" class="ajax__combobox_inputcontainer" style="border-width:0px;border-style:None;border-collapse:collapse;display:inline-block;position:relative;top:5px;" cellpadding="0" cellspacing="0">
    <tbody>
      <tr>
        <td class="ajax__combobox_textboxcontainer"><input style="margin: 0px;" name="ctl00$ComboBox1$TextBox" id="ComboBox1_TextBox" autocomplete="off" type="text"></td>
        <td class="ajax__combobox_buttoncontainer"><button id="ComboBox1_Button" type="button" style="visibility: visible; height: 23px; width: 23px; margin: 0px; padding: 0px;"></button></td>
      </tr>
    </tbody>
  </table>
  <input name="ctl00$ComboBox1$HiddenField" id="ComboBox1_HiddenField" value="0" type="hidden">
</div>

生成的input[type=text]具有不同的ID。它将服务器的 ID 与 _Textbox 连接起来。

因此，在您的情况下，您必须使用 $('#ComboBox1_TextBox').keyboard 才能使其正常工作。例如:

<script type="text/javascript">
    $(document).ready(function () {
        $('#ComboBox1_TextBox').keyboard({
                usePreview: false,
                autoAccept: true,
                enterNavigation: true,
                visible: function (e, keyboard, el) {
                    keyboard.$keyboard.prepend('<h2/>')
                        .draggable({
                            handle: "h2",
                            containment: "window"
                        });
                }
            })
            .addTyping();
    });
</script>