单击时如何将一个文本字段的旧值与失去焦点时的同一文本字段的值进行比较

Question

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

我有一个从GridView生成的表。 该table的行数带有一个可编辑字段：电子邮件地址。

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

这是我从GridView生成的html ：

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

我该如何处理这种情况？

谢谢

Answer 1

这样的事情会起作用。

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

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!');
             }
        }
    );
});

注意：您需要将“保存”事件绑定到：

1. 防止引发通知，因为单击“保存”是合法的，不应引起警告。
2. 将data-old-email值更新为新保存的值，以防止在返回该字段时发出警告。

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

但是这种方法只是您可以使用的一种。

Answer 2

如果您可以使用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

嗯 我明白你为什么有问题。

用户离开该字段时，我会做2件事中的1件事。

提醒他们。

$(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", "" );});

这将删除边框。 :)

这里是一个jsfiddle，其中的代码与示例代码一起运行。