将Mottie虚拟键盘连接到ajaxcontroltoolkit组合框

时间:2015-09-22 17:49:16

标签: javascript jquery asp.net combobox

当我输入一个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>

1 个答案:

答案 0 :(得分:0)

这是因为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才能使其正常运行。 E.g:

<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>