Avoid parsing HTML when creating <input> nodes

We used to create them like $( '<input type="checkbox" />' ), which
actually does HTML parsing under the hood, because on IE 8 and lower
trying to change the 'type' of an <input> node throws an exception.
But we dropped support for IE 8 recently and no longer need to do that.

Upstream change for OOjs UI is I166f5ab0dce5ab47dc6a1f4e2e5ad012635911ed.

Find:         \$\( '<input type="(\w+)" ?/?>' \)
Replace with: $( '<input>' ).attr( 'type', '\1' )

Change-Id: Ie86f8917e8ce100de22006516daa542ad178aab6

diff --git a/resources/src/mediawiki.special/mediawiki.special.search.js b/resources/src/mediawiki.special/mediawiki.special.search.js
index 730119e..ab83e1a 100644 (file)
--- a/resources/src/mediawiki.special/mediawiki.special.search.js
+++ b/resources/src/mediawiki.special/mediawiki.special.search.js
@@ -16,14 +16,14 @@
                        $( '<label>' )
                                .text( mw.msg( 'powersearch-togglelabel' ) )
                ).append(
-                       $( '<input type="button" />' )
+                       $( '<input>' ).attr( 'type', 'button' )
                                .attr( 'id', 'mw-search-toggleall' )
                                .prop( 'value', mw.msg( 'powersearch-toggleall' ) )
                                .click( function () {
                                        $checkboxes.prop( 'checked', true );
                                } )
                ).append(
-                       $( '<input type="button" />' )
+                       $( '<input>' ).attr( 'type', 'button' )
                                .attr( 'id', 'mw-search-togglenone' )
                                .prop( 'value', mw.msg( 'powersearch-togglenone' ) )
                                .click( function () {

diff --git a/resources/src/mediawiki.widgets.datetime/DateTimeInputWidget.js b/resources/src/mediawiki.widgets.datetime/DateTimeInputWidget.js
index df148c7..7f36137 100644 (file)
--- a/resources/src/mediawiki.widgets.datetime/DateTimeInputWidget.js
+++ b/resources/src/mediawiki.widgets.datetime/DateTimeInputWidget.js
@@ -358,7 +358,7 @@
                                        if ( spec.intercalarySize ) {
                                                $.each( spec.intercalarySize, reduceFunc );
                                        }
-                                       $field = $( '<input type="text">' )
+                                       $field = $( '<input>' ).attr( 'type', 'text' )
                                                .attr( {
                                                        tabindex: disabled ? -1 : 0,
                                                        size: spec.size,
@@ -762,7 +762,7 @@
         * @private
         */
        mw.widgets.datetime.DateTimeInputWidget.prototype.getInputElement = function () {
-               return $( '<input type="hidden" />' );
+               return $( '<input>' ).attr( 'type', 'hidden' );
        };
 
        /**

diff --git a/resources/src/mediawiki.widgets/mw.widgets.DateInputWidget.js b/resources/src/mediawiki.widgets/mw.widgets.DateInputWidget.js
index 3e03502..cba580b 100644 (file)
--- a/resources/src/mediawiki.widgets/mw.widgets.DateInputWidget.js
+++ b/resources/src/mediawiki.widgets/mw.widgets.DateInputWidget.js
@@ -235,7 +235,7 @@
         * @protected
         */
        mw.widgets.DateInputWidget.prototype.getInputElement = function () {
-               return $( '<input type="hidden">' );
+               return $( '<input>' ).attr( 'type', 'hidden' );
        };
 
        /**

diff --git a/resources/src/mediawiki/api/upload.js b/resources/src/mediawiki/api/upload.js
index 47d80d6..437ddec 100644 (file)
--- a/resources/src/mediawiki/api/upload.js
+++ b/resources/src/mediawiki/api/upload.js
@@ -61,7 +61,7 @@
         * @return {jQuery}
         */
        function getHiddenInput( name, val ) {
-               return $( '<input type="hidden" />' )
+               return $( '<input>' ).attr( 'type', 'hidden' )
                        .attr( 'name', name )
                        .val( val );
        }

diff --git a/tests/qunit/suites/resources/jquery/jquery.byteLimit.test.js b/tests/qunit/suites/resources/jquery/jquery.byteLimit.test.js
index 0cb9cc8..81c116c 100644 (file)
--- a/tests/qunit/suites/resources/jquery/jquery.byteLimit.test.js
+++ b/tests/qunit/suites/resources/jquery/jquery.byteLimit.test.js
@@ -66,14 +66,14 @@
 
        byteLimitTest( {
                description: 'Plain text input',
-               $input: $( '<input type="text"/>' ),
+               $input: $( '<input>' ).attr( 'type', 'text' ),
                sample: simpleSample,
                expected: simpleSample
        } );
 
        byteLimitTest( {
                description: 'Plain text input. Calling byteLimit with no parameters and no maxlength attribute (bug 36310)',
-               $input: $( '<input type="text"/>' )
+               $input: $( '<input>' ).attr( 'type', 'text' )
                        .byteLimit(),
                sample: simpleSample,
                expected: simpleSample
@@ -81,7 +81,7 @@
 
        byteLimitTest( {
                description: 'Limit using the maxlength attribute',
-               $input: $( '<input type="text"/>' )
+               $input: $( '<input>' ).attr( 'type', 'text' )
                        .attr( 'maxlength', '10' )
                        .byteLimit(),
                sample: simpleSample,
@@ -90,7 +90,7 @@
 
        byteLimitTest( {
                description: 'Limit using a custom value',
-               $input: $( '<input type="text"/>' )
+               $input: $( '<input>' ).attr( 'type', 'text' )
                        .byteLimit( 10 ),
                sample: simpleSample,
                expected: '1234567890'
@@ -98,7 +98,7 @@
 
        byteLimitTest( {
                description: 'Limit using a custom value, overriding maxlength attribute',
-               $input: $( '<input type="text"/>' )
+               $input: $( '<input>' ).attr( 'type', 'text' )
                        .attr( 'maxlength', '10' )
                        .byteLimit( 15 ),
                sample: simpleSample,
@@ -107,7 +107,7 @@
 
        byteLimitTest( {
                description: 'Limit using a custom value (multibyte)',
-               $input: $( '<input type="text"/>' )
+               $input: $( '<input>' ).attr( 'type', 'text' )
                        .byteLimit( 14 ),
                sample: mbSample,
                expected: '1234567890' + U_20AC + '1'
@@ -115,7 +115,7 @@
 
        byteLimitTest( {
                description: 'Limit using a custom value (multibyte) overlapping a byte',
-               $input: $( '<input type="text"/>' )
+               $input: $( '<input>' ).attr( 'type', 'text' )
                        .byteLimit( 12 ),
                sample: mbSample,
                expected: '1234567890' + '12'
@@ -123,7 +123,7 @@
 
        byteLimitTest( {
                description: 'Pass the limit and a callback as input filter',
-               $input: $( '<input type="text"/>' )
+               $input: $( '<input>' ).attr( 'type', 'text' )
                        .byteLimit( 6, function ( val ) {
                                var title = mw.Title.newFromText( String( val ) );
                                // Return without namespace prefix
@@ -135,7 +135,7 @@
 
        byteLimitTest( {
                description: 'Limit using the maxlength attribute and pass a callback as input filter',
-               $input: $( '<input type="text"/>' )
+               $input: $( '<input>' ).attr( 'type', 'text' )
                        .attr( 'maxlength', '6' )
                        .byteLimit( function ( val ) {
                                var title = mw.Title.newFromText( String( val ) );
@@ -148,7 +148,7 @@
 
        byteLimitTest( {
                description: 'Pass the limit and a callback as input filter',
-               $input: $( '<input type="text"/>' )
+               $input: $( '<input>' ).attr( 'type', 'text' )
                        .byteLimit( 6, function ( val ) {
                                var title = mw.Title.newFromText( String( val ) );
                                // Return without namespace prefix
@@ -163,7 +163,7 @@
 
        byteLimitTest( {
                description: 'Input filter that increases the length',
-               $input: $( '<input type="text"/>' )
+               $input: $( '<input>' ).attr( 'type', 'text' )
                .byteLimit( 10, function ( text ) {
                        return 'prefix' + text;
                } ),
@@ -175,7 +175,7 @@
        // Regression tests for bug 41450
        byteLimitTest( {
                description: 'Input filter of which the base exceeds the limit',
-               $input: $( '<input type="text"/>' )
+               $input: $( '<input>' ).attr( 'type', 'text' )
                .byteLimit( 3, function ( text ) {
                        return 'prefix' + text;
                } ),
@@ -188,21 +188,21 @@
        QUnit.test( 'Confirm properties and attributes set', 4, function ( assert ) {
                var $el, $elA, $elB;
 
-               $el = $( '<input type="text"/>' )
+               $el = $( '<input>' ).attr( 'type', 'text' )
                        .attr( 'maxlength', '7' )
                        .appendTo( '#qunit-fixture' )
                        .byteLimit();
 
                assert.strictEqual( $el.attr( 'maxlength' ), '7', 'maxlength attribute unchanged for simple limit' );
 
-               $el = $( '<input type="text"/>' )
+               $el = $( '<input>' ).attr( 'type', 'text' )
                        .attr( 'maxlength', '7' )
                        .appendTo( '#qunit-fixture' )
                        .byteLimit( 12 );
 
                assert.strictEqual( $el.attr( 'maxlength' ), '12', 'maxlength attribute updated for custom limit' );
 
-               $el = $( '<input type="text"/>' )
+               $el = $( '<input>' ).attr( 'type', 'text' )
                        .attr( 'maxlength', '7' )
                        .appendTo( '#qunit-fixture' )
                        .byteLimit( 12, function ( val ) {
@@ -211,12 +211,12 @@
 
                assert.strictEqual( $el.attr( 'maxlength' ), undefined, 'maxlength attribute removed for limit with callback' );
 
-               $elA = $( '<input type="text"/>' )
+               $elA = $( '<input>' ).attr( 'type', 'text' )
                        .addClass( 'mw-test-byteLimit-foo' )
                        .attr( 'maxlength', '7' )
                        .appendTo( '#qunit-fixture' );
 
-               $elB = $( '<input type="text"/>' )
+               $elB = $( '<input>' ).attr( 'type', 'text' )
                        .addClass( 'mw-test-byteLimit-foo' )
                        .attr( 'maxlength', '12' )
                        .appendTo( '#qunit-fixture' );
@@ -233,7 +233,7 @@
 
                // Use a new <input /> because the bug only occurs on the first time
                // the limit it reached (bug 40850)
-               $el = $( '<input type="text"/>' )
+               $el = $( '<input>' ).attr( 'type', 'text' )
                        .appendTo( '#qunit-fixture' )
                        .byteLimit( 3 )
                        .val( 'abc' ).trigger( 'change' )
@@ -241,7 +241,7 @@
 
                assert.strictEqual( $el.val(), 'abc', 'Trim from the insertion point (at 0), not the end' );
 
-               $el = $( '<input type="text"/>' )
+               $el = $( '<input>' ).attr( 'type', 'text' )
                        .appendTo( '#qunit-fixture' )
                        .byteLimit( 3 )
                        .val( 'abc' ).trigger( 'change' )