w3ctech

表单中defaultValue, defaultChecked, defaultSelected的使用

如果w3ctech希望在修改文章时,你没有对标题和内容做修改的话,将通过JavaScript阻止提交,你会怎么做呢?

当然一种方法就是当刚刚load成功的时候,把标题和内容都存下来,当提交的时候,我们在把当成文本框中的值和之前存下来的值进行比较,看是否相等。如果相等,则不允许提交。

其实浏览器针对各表单元素提供了相应的方法来解决这个问题,我们来看看,如下:

和 提供了defaultValue

<input type="text" id="name" name="name" value="w3ctech" />

<script>
var name = document.getElementById("name");
if (name.value != name.defaultValue) alert("#name已修改");
</script>

Checkboxes 和 Radio 提供了defaultChecked

<!-- newsletter opt-in -->
<input type="checkbox" id="optin" name="optin" checked="checked" />

<script>
var optin = document.getElementById("optin");
if (optin.checked != optin.defaultChecked) alert("#optin已修改");
</script>

下拉框 提供了defaultSelected

<!-- job title select box -->
<select id="job" name="job">
    <option>web designer</option>
    <option selected="selected">web developer</option>
    <option>graphic artist</option>
    <option>IT professional</option>
    <option>other</option>
</select>

<script>
var job = document.getElementById("job");
if (!job.options[job.selectedIndex].defaultSelected) alert("#job has changed");
</script>

本文的内容并不完整,欢迎大家补充!

w3ctech微信

扫码关注w3ctech微信公众号

共收到2条回复

  • 很棒啊!

    回复此楼
  • 浏览器通用?

    回复此楼