Question

我想通过使用纯javascript检查表单是否已更改。

我的计划是在表单标记之间包含所有文本，包括html标记，对字符串进行散列，然后当我需要检查是否有任何值发生更改时，我可以重新整理表单并进行比较。

所以我有

innerHTML

问题是输入字段的“值”不会更新。我能够更改每个文本框字段，而值或内部HTML不会更改。

以下是实际哈希并获取window.onload = function () { var forms = document.getElementsByTagName("form"); var hashValue = forms[1].innerHTML.hashCode(); Array.prototype.map.call(document.getElementsByClassName("hash"), function (hObj) { hObj.addEventListener("click", function (event) { if (document.getElementsByTagName("form")[1].innerHTML.hashCode() == hashValue) { return true; } else { var conf = confirm("Continue to the next building WITHOUT saving? Pressing \"Okay\" will undo any pending changes." ); if(conf) { return true; } event.preventDefault(); return false; } }); }); };

的代码

if (document.getElementsByTagName("form")[1].innerHTML.hashCode() == hashValue) {
                        return true;
                    }

以上栏目

package mediaclub.app.paymob;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.Menu;
import android.widget.ImageView;
import android.widget.ListView;

import java.util.ArrayList;

import mediaclub.app.paymob.Adapters.ContactsAdapter;

public class AddMembersActivity extends Activity {
    ArrayList<Contact> listContacts;
    ListView lvContacts;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_add_members);
        listContacts = new ContactFetcher(this).fetchAll();
        lvContacts = (ListView) findViewById(R.id.lvContacts);
        ImageView checkContacts = (ImageView) findViewById(R.id.checkedId);
        ContactsAdapter adapterContacts = new ContactsAdapter(this, listContacts);
        lvContacts.setAdapter(adapterContacts);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.iconmenu, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(android.view.MenuItem item) {
        switch (item.getItemId()) {
            case R.id.checkedId:
                Intent i = new Intent(AddMembersActivity.this, AddMembersActivity.class);
                startActivity(i);
                return true;
        }
        return super.onOptionsItemSelected(item);
    }


}

总是返回true，因为即使在输入了文本框之后，innerHTML也没有改变。

我该怎么办？是否有其他方法可以使用更新的信息获取HTML中的文本？

Answer 1

您可以循环使用表单元素，获取并连接值，然后对值进行哈希处理。

<强>更新

以下是使用FormData的示例（取决于浏览器目标）：

此处的哈希函数：Generate a Hash from string in Javascript/jQuery

String.prototype.hashCode = function() {
  var hash = 0, i, chr;
  if (this.length === 0) return hash;
  for (i = 0; i < this.length; i++) {
    chr   = this.charCodeAt(i);
    hash  = ((hash << 5) - hash) + chr;
    hash |= 0; // Convert to 32bit integer
  }
  return hash;
};



function GetFormHash() {

    var hashes = [];
    var forms = document.getElementsByTagName("form");
    var _hash = ""

    for(var i=0;i<forms.length;i++) {

       var formData = new FormData(forms[i]);


      for (var key of formData.keys()) {
           console.log(key + "=" + formData.get(key)); 
           _hash = _hash + key + "=" + formData.get(key);
       }

    hashes.push(_hash.hashCode());
    console.log(_hash.hashCode());

  }

  return hashes;
}

onchange还有<form>个事件。取决于浏览器...

<form onchange="alert('changed')"></form>

如果您使用类似jQuery的内容，则可以使用该change（）事件：https://api.jquery.com/category/events/form-events/

更改不会告诉您他们是否更改了数据 - 因此不是100％可靠。如果你对像jQuery这样的库开放 - 你可以序列化数据https://api.jquery.com/serialize/以跟踪变化，

最后一个不完整的例子。您需要更新以获得非“输入”表单元素，如textarea等。您还需要做一些工作才能获得所选的无线电......

function GetFormHashOther() {

var hashes = [];
    var forms = document.getElementsByTagName("form");
    var _hash = ""

    for(var i=0;i<forms.length;i++) {

     var chill = forms[i].getElementsByTagName("input");

     for (var c of chill) {
        console.log(c.name + " = " + c.value);
        _hash = _hash + c.name + " = " + c.value;
     }

    hashes.push(_hash.hashCode());
    console.log(_hash.hashCode());

  }

  return hashes;
}

Answer 2

您可以为每个字段的'input'事件分配一个事件处理程序，以更改布尔标志。然后，您只需检查该标志，并在检查完成后将其设置为false。

例如

document.querySelectorAll("#yourForm input").forEach(input => {
    input.addEventListener("input", () => {
        changed = true;
    });
}

/* ... */

function checkIfChanged() {
    if(changed) {
       // ...
    }

    changed = false;
}

如果您还需要检查退格键，则可以使用keypress事件。

如何在表单Tag之间获取HTML中的更新输入值

2 个答案: