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

也许我问问题的方式不对，但我有以下的情况

我有一个从

GridView

生成的表。此

表

有许多行，其中有一个可编辑字段：电子邮件地址

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

这是从

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>

电子邮件
12
安德斯
罗汉森
塔科马公园
必须输入电子邮件地址
8.
黛博拉
达米恩
弗雷斯诺
必须输入电子邮件地址
7.
德里克
查迪克
费尔菲尔德
必须输入电子邮件地址

我如何处理这种情况

---

谢谢

像这样的东西会有用的

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

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

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

防止抛出通知，因为单击“保存”是合法的，不应引起警告

将

数据旧电子邮件

值更新为新保存的值，以防止返回该字段时出现警告

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

---

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

如果你可以使用JQuery，那么我会使用类似的方法

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

编辑：

只要他们在离开页面之前提交更改，这种情况就可以了。那么，为什么不禁用submit按钮直到某些内容发生更改，然后启用它来提醒他们提交更改呢

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

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

编辑：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;');
                                 }
                               });        
 });

这会在已更改的字段上显示红色轮廓。这很好，但是如果提交没有引起页面刷新，那么当他们这样点击提交时，你需要一些东西来删除边框

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

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

这将删除边框。：）

---

一个JSFIDLE，代码与示例代码一起运行。

是的，jQuery可以是一个选项如果我事先不知道输入字段的id怎么办？现在我有了

Reset（object）

函数，当点击输入字段时，它会清除页面上的其他内容，在点击的事件中传递输入字段，该事件假定为类。它可能是多种选择器，我需要查看一个输入的标记示例，以便更准确地提供帮助。如果我事先不知道输入字段的id怎么办？现在我有了重置（对象）功能，当点击输入字段时，它会清除页面上的其他内容，其中，我将点击事件的输入字段传递为

this

@eugene。如果您向所有电子邮件输入中添加一个类，如

class='email'

，或者在本例中

class='ClickableField'

JQuery，则会确定您点击的是哪一个。或者如果屏幕上的唯一文本输入是您可以使用的电子邮件文本框

$（'：text'）

。如果不是的话，

$（“#GridID:text”）

就是你想要的。问题是，@Dan，我的字段是从

GridView

生成的，没有任何类属性附加到它们。我将使用从

GridView

@eugene生成的html更新我的代码。查看我的最新编辑，我认为它适用于您的网格工具。