美文网首页
HTML value vs defaultValue

HTML value vs defaultValue

作者: ilaoke | 来源:发表于2016-02-26 19:31 被阅读972次

    https://developer.mozilla.org/en/docs/Web/API/HTMLInputElement
    http://stackoverflow.com/questions/11853666/html-method-wrong-when-input-value-has-changed
    http://stackoverflow.com/questions/7095956/jquery-html-does-not-return-changed-values

    这两天项目中碰到个问题:
    用户输入某些数据(或通过jQuery.val()更新某些输入框的值),点击保存后,需要临时缓存部分html,待页面刷新后再append到页面上。但是通过jQuery.html()方法获得的html,用户输入的数据丢失了(input, select等)。

    HTMLInputElementvaluedefaultValue两个属性;通过jQuery.val()方法(或是用户输入)只更改了value属性,而更改value是不会映射到html上的。所以通过jQuery.html()方法获取的是html的初始值。

    解决方法:
    由于defaultValue属性会映射到html上,所以将value属性设置给defaultValue即可。

    /**
     * 设置form组件的默认值
     * @param $dom jQuery(form)对象
     */
    function updateFormDefaultValue($dom){
        $dom.find('[type=text], textarea').each(function(){ this.defaultValue = this.value; });
        $dom.find('[type=checkbox], [type=radio]').each(function(){ this.defaultChecked = this.checked; });
        $dom.find('select option').each(function(){ this.defaultSelected = this.selected; });
    }
    

    通过jQuery.attr('value', someValue)方法也可以映射到html.

    相关文章

      网友评论

          本文标题:HTML value vs defaultValue

          本文链接:https://www.haomeiwen.com/subject/fvcwkttx.html