2010-11-18 81 views
0

有一个地址簿已经有联系人。这就是打开联系人链接加载时在页面上的原因。如果用户不想添加当前联系人来填充这些字段,那么一旦他们提供了数据到字段,我想要添加到联系人按钮出现。 setInterval函数是否适合检查以查看用户是否将新数据输入到这些输入字段中?如果是的话,我会如何编写dojo代码?我可以使用setInterval来确定使用dojo替换元素吗?

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title> 
     SAP 
    </title> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/dojo/1.3.2/dojo/dojo.xd.js" djConfig="parseOnLoad: true"> 
    </script> 
    <script type="text/javascript"> 

     dojo.addOnLoad(function(){ 
      dojo.require("dijit.form.Button"); 
      dojo.require("dijit.form.TextBox"); 
     }); 

    </script> 
    <style type="text/css"> 
     #prelims { 
      position: relative; 
      float: left; 
      margin-right: 10px; 
      margin-bottom: 5px 
     } 

     #addToContacts { 
      position: relative; 
      float: left; 
      display: none; 
     } 

     #nameWrap { 
      position: relative; 
      clear: left; 
     } 

    </style> 
</head> 
<body> 
    <form> 
     <div id="prelims" class="checksVertical"> 
      <span id="" class="button-link pill-btn"> 
       <span class="hasHover"> 
        <a id="open-contacts" class="buttons" target="" href="#"> 
         Open Contacts 
        </a> 
       </span> 
      </span> 
     </div> 
     <div id="addToContacts" class="checksVertical"> 
      <span class="button-link pill-btn"> 
       <span class="hasHover"> 
        <div id="addNewContact" class="hide"> 
         <form method="post" id="addContactHide"> 
          <input class="buttons" id="addContact" type="submit" value="Add Contact" /><input type="hidden" id="hiddenFName" name="tFName" value=""/><input type="hidden" id="hiddenLName" name="tLName" value=""/><input type="hidden" id="hiddenCompany" name="tCompany" value""/> 
         </form> 
        </div> 
       </span> 
      </span> 
     </div> 
     <div id="nameWrap"> 
      <div class="input-inline"> 
       <label id="for-tFName" for="tFName"> 
        <span class="required"> 
         * 
        </span>First Name 
       </label> 
       <div class="input-text-wrapper input-text-lg"> 
        <span class="input-cap-left"> 
        </span> 
        <span class="input-field"> 
         <input type="text" id="tFName" name="tFName" maxlength="50" /> 
        </span> 
        <span class="input-cap-right"> 
        </span> 
       </div> 
      </div> 
      <div class="input-inline last"> 
       <label id="for-tLName" for="tLName"> 
        <span class="required"> 
         * 
        </span>Last Name 
       </label> 
       <div class="input-text-wrapper input-text-lg"> 
        <span class="input-cap-left"> 
        </span> 
        <span class="input-field"> 
         <input type="text" id="tLName" name="tLName" maxlength="50" /> 
        </span> 
        <span class="input-cap-right"> 
        </span> 
       </div> 
      </div> 
      <div class="clearfix"> 
      </div> 
     </div> 
     <div id="tCompanyWidget"> 
      <label id="for-tCompany" for="tCompany"> 
       <span class="required"> 
        * 
       </span>Company Name 
      </label> 
      <div class="input-text-wrapper input-text-lg"> 
       <span class="input-cap-left"> 
       </span> 
       <span class="input-field"> 
        <input type="text" id="tCompany" name="tCompany" maxlength="50" /> 
       </span> 
       <span class="input-cap-right"> 
       </span> 
      </div> 
     </div> 
    </form> 
</body> 

回答

1

我认为,要么的onChange或的onblur上的输入字段事件是最好再使用的setInterval。由于这些存在于常规输入html DOM节点上,因此不必使用dojo。

编写JavaScript函数的几个输入字段,可重复使用:

var show_add_to_contact = function(){ 
    dojo.byId("prelims").style.display = "none"; 
    dojo.byId("addToContacts").style.display = "block"; 
}; 

然后你就可以直接使用它的HTML DOM节点上:

<input type="text" id="tFName" name="tFName" maxlength="50" onChange="show_add_to_contact();" /> 

,或者你可以分配它编程时创建dijit TextBox

new dijit.form.TextBox({"onChange":show_add_to_contact,"name":"tFName"}, "tFName"); 
相关问题