JQUERY AJAX LOAD-TEXTBOX FOCUS

时间:2017-04-24 02:10:03

标签: javascript jquery html asp.net ajax

我正在尝试将div中的文本显示在div旁边的文本框的焦点上。我没看到那个文字

以下是jquery脚本

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
    <script src="../Scripts/jquery-1.11.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            //$jquery selector
            //find textbox and place it in a variable
            var txtbox = $('input[type="text"]');

            //when textbox recives focus
            txtbox.focus(function () {
                $('#newroleHelpDiv').load('help.html');
            });

            //when textbox loses focus
            txtbox.blur(function () {
                $('#newroleHelpDiv').html('');
            });
        });
    </script>

以下是ASP代码

    <fieldset style="width:350px">
            <legend> New Role</legend>
             <table>
                 <tr>
                     <td>Insert New Role:</td>
                     <td> <input type="text" id="newrole" /> </td>
                     <td> <div id="newroleHelpDiv" runat="server"></div></td>
                     </tr>
                 </table>
        </fieldset>
</asp:Content>

以下是帮助文本来自

的help.html文件
<div id="newroleHelpDiv">
    You may add an employee to this role
</div>

1 个答案:

答案 0 :(得分:0)

id应该是唯一的,因此如果您拥有id="newroleHelpDiv"主html,则应为help.html使用其他ID

不确定是否可以加载html文件,但如果只加载一次,那么你可以像这样显示和隐藏:

&#13;
&#13;
$(document).ready(function() {
  $('#newroleHelpDiv').load('help.html');
  $('#newroleHelpDiv').hide();
  //$jquery selector
  //find textbox and place it in a variable
  var txtbox = $('input[type="text"]');

  //when textbox recives focus
  txtbox.focus(function() {
    $('#newroleHelpDiv').show();
  });

  //when textbox loses focus
  txtbox.blur(function() {
    $('#newroleHelpDiv').hide();
  });
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<fieldset style="width:350px">
  <legend> New Role</legend>
  <table>
    <tr>
      <td>Insert New Role:</td>
      <td>
        <input type="text" id="newrole" /> </td>
      <td>
        <div id="newroleHelpDiv" runat="server">You may add an employee to this role</div>
      </td>
    </tr>
  </table>
</fieldset>
&#13;
&#13;
&#13;