mathiasbynens / jquery-placeholder

A jQuery plugin that enables HTML5 placeholder behavior for browsers that aren’t trying hard enough yet
https://mths.be/placeholder
MIT License
3.98k stars 1.34k forks source link

Fix: Serializing the value of empty DOM elements using native JSON in IE8 #304

Open siyu77 opened 6 years ago

siyu77 commented 6 years ago

How to reproduce: OS: Windows XP Browser: Internet Explorer 8.0.6001.18702

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>jquery-placeholder test suite</title>
        <style>
        </style>
    </head>
    <body>
        <div id="qunit"></div>
        <div id="fixtures">
            <!-- I explicitly want these to be visible in the page, for easier debugging. -->
            <form>
                <p><label><code>type=search</code> <input id="input-type-search" type="search"></label></p>
                <p><label><code>type=text</code> <input id="input-type-text" type="text"></label></p>
                <p><label><code>type=email</code> <input id="input-type-email" type="email"></label></p>
                <p><label><code>type=url</code> <input id="input-type-url" type="url"></label></p>
                <p><label><code>type=tel</code> <input id="input-type-tel" type="tel"></label></p>
                <p><label for="input-type-password"><code>type=password</code> </label><input id="input-type-password" type="password"></p>
                <p><label><code>textarea</code> <textarea id="textarea"></textarea></label></p>
                <p><input type="submit" value="type=submit"></p>
            </form>
        </div>
        <script src="../jquery.min.js"></script>
        <script src="../jquery.placeholder.js"></script>
        <script src="tests.js"></script>
    </body>
</html>
console.log(JSON.stringify($('#input-type-search').val()));
console.log(JSON.stringify($('#input-type-text').val()));
console.log(JSON.stringify($('#input-type-email').val()));
console.log(JSON.stringify($('#input-type-url').val()));
console.log(JSON.stringify($('#input-type-tel').val()));
console.log(JSON.stringify($('#input-type-password').val()));
console.log(JSON.stringify($('#input-type-textarea').val()));

Outputs:

"null"

Cause and Fix method: See: https://blogs.msdn.microsoft.com/jscript/2009/06/22/serializing-the-value-of-empty-dom-elements-using-native-json-in-ie8/