單擊時如何將一個文本字段的舊值與失去焦點時的同一文本字段的值進行比較

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，其中的代碼與示例代碼一起運行。