如何比较单个文本字段的旧值以及丢失焦点时相同文本字段的值

时间：2014-03-24 19:29:55

标签： javascript html onclick

可能我没有以正确的方式提出问题，但我有以下情况。

我有一张从GridView生成的表格。此table包含一行，其中包含一个可编辑字段：电子邮件地址。

我想要做的是，例如，当用户更改电子邮件字段但尚未将其提交到数据库，忘记它并点击另一个文本框进行编辑时，我提醒用户他/她离开了这个领域但没有更新呢？

这是html生成的GridView：

<div>
<table cellspacing="0" id="MainContent_GridView1" style="border-collapse:collapse;">
    <tr>
        <th scope="col"><a href="javascript:__doPostBack(&#39;ctl00$MainContent$GridView1&#39;,&#39;Sort$CustID&#39;)">Customer ID</a></th><th scope="col"><a href="javascript:__doPostBack(&#39;ctl00$MainContent$GridView1&#39;,&#39;Sort$CustFirstName&#39;)">First Name</a></th><th scope="col"><a href="javascript:__doPostBack(&#39;ctl00$MainContent$GridView1&#39;,&#39;Sort$CustLastName&#39;)">Last Name</a></th><th scope="col"><a href="javascript:__doPostBack(&#39;ctl00$MainContent$GridView1&#39;,&#39;Sort$CustCity&#39;)">City</a></th><th scope="col">Email</th>
    </tr><tr>
        <td>
          <span id="MainContent_GridView1_lblCustID_0">12</span>
        </td><td>
          <span id="MainContent_GridView1_lblFirstName_0">Anders</span>
        </td><td>
          <span id="MainContent_GridView1_lblLastName_0">Rohansen</span>
        </td><td>
         <span id="MainContent_GridView1_lblCity_0">Takoma Park</span>
       </td><td>
         <input name="ctl00$MainContent$GridView1$ctl02$txtEmail" type="text" value="a.rohansen@testemail.com" id="MainContent_GridView1_txtEmail_0" />
          <span data-val-controltovalidate="MainContent_GridView1_txtEmail_0" data-val-errormessage="Must enter Email Address" data-val-validationGroup="grpEmail" id="MainContent_GridView1_ctl00_0" data-val="true" data-val-evaluationfunction="RequiredFieldValidatorEvaluateIsValid" data-val-initialvalue="" style="visibility:hidden;">Must enter Email Address</span>
           <input type="submit" name="ctl00$MainContent$GridView1$ctl02$btnUpdate" value="Update Email" onclick="return ValidateEmail(this);WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$MainContent$GridView1$ctl02$btnUpdate&quot;, &quot;&quot;, true, &quot;grpEmail&quot;, &quot;&quot;, false, false))" id="MainContent_GridView1_btnUpdate_0" ButtonType="Button" />

         </td>
    </tr><tr style="background-color:#EEEEEE;">
        <td>
          <span id="MainContent_GridView1_lblCustID_1">8</span>
        </td><td>
          <span id="MainContent_GridView1_lblFirstName_1">Deborah</span>
        </td><td>
          <span id="MainContent_GridView1_lblLastName_1">Damien</span>
        </td><td>
         <span id="MainContent_GridView1_lblCity_1">Fresno</span>
       </td><td>
         <input name="ctl00$MainContent$GridView1$ctl03$txtEmail" type="text" value="d.damien@testemail.com" id="MainContent_GridView1_txtEmail_1" />
          <span data-val-controltovalidate="MainContent_GridView1_txtEmail_1" data-val-errormessage="Must enter Email Address" data-val-validationGroup="grpEmail" id="MainContent_GridView1_ctl00_1" data-val="true" data-val-evaluationfunction="RequiredFieldValidatorEvaluateIsValid" data-val-initialvalue="" style="visibility:hidden;">Must enter Email Address</span>
           <input type="submit" name="ctl00$MainContent$GridView1$ctl03$btnUpdate" value="Update Email" onclick="return ValidateEmail(this);WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$MainContent$GridView1$ctl03$btnUpdate&quot;, &quot;&quot;, true, &quot;grpEmail&quot;, &quot;&quot;, false, false))" id="MainContent_GridView1_btnUpdate_1" ButtonType="Button" />

         </td>
    </tr><tr>
        <td>
          <span id="MainContent_GridView1_lblCustID_2">7</span>
        </td><td>
          <span id="MainContent_GridView1_lblFirstName_2">Derek</span>
        </td><td>
          <span id="MainContent_GridView1_lblLastName_2">Chaddick</span>
        </td><td>
         <span id="MainContent_GridView1_lblCity_2">Fairfield</span>
       </td><td>
         <input name="ctl00$MainContent$GridView1$ctl04$txtEmail" type="text" value="d.chaddick@testemail.com" id="MainContent_GridView1_txtEmail_2" />
          <span data-val-controltovalidate="MainContent_GridView1_txtEmail_2" data-val-errormessage="Must enter Email Address" data-val-validationGroup="grpEmail" id="MainContent_GridView1_ctl00_2" data-val="true" data-val-evaluationfunction="RequiredFieldValidatorEvaluateIsValid" data-val-initialvalue="" style="visibility:hidden;">Must enter Email Address</span>
           <input type="submit" name="ctl00$MainContent$GridView1$ctl04$btnUpdate" value="Update Email" onclick="return ValidateEmail(this);WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$MainContent$GridView1$ctl04$btnUpdate&quot;, &quot;&quot;, true, &quot;grpEmail&quot;, &quot;&quot;, false, false))" id="MainContent_GridView1_btnUpdate_2" ButtonType="Button" />

         </td>
    </tr>
</table>

我该如何处理这种情况？

感谢的

2 个答案:

答案 0 :(得分：0)

这样的事情会起作用。

首先，遍历所有电子邮件字段，将加载的值存储到您可以引用的位置。然后，在模糊检查时是否已更改。

jQuery(function($) {
    $('input.email').each(
        function() {
             $(this).attr('data-old-email', $(this).val());
        }
    );

    $('input.email').blur(
        function() {
             if ($(this).attr('data-old-email') != $(this).val()) {
                 alert('Wait! You changed your e-mail!');
             }
        }
    );
});

注意： 你需要绑定到＆＃34; Save＆＃34;事件：

  1. 防止通知被抛出，因为点击＆＃34;保存＆＃34;是合法的，不应该引起警告。
  2. 将data-old-email值更新到新保存的值，以防止警告回到该字段时发出警告。

    3. 根据您的应用程序，您可以将检查功能绑定到其他字段的焦点，而不是指定电子邮件字段的 blur 。

    但是这种方法是你可以使用的方法之一。

答案 1 :(得分：0)

如果你可以使用JQuery那么我会选择这样的东西，

var lastTextVal ='';
$('.ClickableField').focus(function(){lastTextVal = $(this).val();});
$('.ClickableField').blur(function(){alert($(this).val()==lastTextVal);});

修改

只要他们在离开页面之前提交更改，此方案就可以了。那么为什么不在发生变化之前禁用提交按钮，然后启用它以提醒他们提交更改。

$(document).ready(function() {
     $(':submit').attr('disabled','disabled');

    var lastTextVal ='';
    $('.ClickableField').focus(function(){lastTextVal = $(this).val();});
    $('.ClickableField').blur(function(){
                              if($(this).val()!=lastTextVal) {
                                    $(':submit').removeAttr('disabled');
                                 }
                               });        
 });

编辑2： 在这个例子中，你还可以检查提交按钮是否在他们点击可以导航它们的东西时启用，并提示他们然后像这样提交。

$('a, button').click(function(){

        if($(':submit').attr('disabled') != 'disabled')
        {
           return confirm("You haven't saved!\n Do you want to navigate away anyway?\n OK to continue or Cancel to stay here.");
        }
  });

修改：3

嗯。我明白你为什么遇到问题。

当用户离开现场时，我会做两件事之一。

警告他们。

$(document).ready(function() {
    var lastTextVal ='';
    $('input:text').focus(function(){lastTextVal = $(this).val();});
    $('input:text').blur(function(){
                              if($(this).val()!=lastTextVal) {
                                    alert('Please submit Changes!');

                                 }
                               });        
 });

这很烦人，即使他们离开文本框的原因是点击该行的提交按钮，也会发生这种情况。

另一个。为已更改的字段添加边框，以显示需要执行的操作。

 $(document).ready(function() {
    var lastTextVal ='';
    $('input:text').focus(function(){lastTextVal = $(this).val();});
    $('input:text').blur(function(){
                              if($(this).val()!=lastTextVal) {
                                    $(this).css('border','5px solid red;');
                                 }
                               });        
 });

这会在已更改的字段上显示红色轮廓。这非常好，但是如果提交不会导致页面刷新，那么当他们按这样提交时，你需要放弃边框。

$(':submit').click(function(){ $(this).parent( ).children(":text" ).css( "border", "" );});

将删除边框。 ：）

HERE's与您的示例代码一起运行代码的jsfiddle。

相关问题
最新问题