Swapping attributes of jQuery Selection elements

Question

Background

I'm working on a web application written in .NET 2.0 that uses standard WebControls on its pages. It'll be eventually migrated to 4.x, but right now I need to adapt some of its mobile behavior - and my first requirement is to make use of HTML5 form input types in order to benefit from custom onscreen keyboard formats.

My chosen approach to this problem is to dynamically change the input type of the rendered elements. My current limitations are:

• According to this post, jQuery can't change an input element's type because of Internet Explorer restrictions.
• HtmlInputControl (which is the referenced type when you just add runat='server' to any HTML element) doesn't support the new values for the type property.
• If I just add the type property with the desired new type to a standard TextBox control, it'll render the type property twice.

So I went with a jQuery approach. My idea is to implement a valid TextBox control with an extra tag, nexttype, like this:

<asp:TextBox ID="TextBox1" nexttype="phone" runat="server">

At runtime, it's rendered like this:

<input name="TextBox1" type="text" id="TextBox1" nexttype="phone">

And then clone the rendered elements, replacing their type property with the proper nextype counterpart, like this:

<input name="TextBox1" type="phone" id="TextBox1">

I imagine that my jQuery code should look something like this:

$(':not([nexttype=""])').clone().attr('type', selectedelement.attr('nexttype')).insertAfter(selectedelement).prev().remove();

selectedelement, in this case, is just a placeholder for what I imagine would be the 'currently selected' element on the selection.

The basic idea is:

• pick an element
• clone it
• change the clone's Type property
• insert the clone into the document just after the original
• remove the original

So, yeah, I suck at jQuery. =)

Questions

• My jQuery one-liner is, of course, non-functional. What am I doing wrong?
• Is there a better approach?
• Is there something already out there that does exactly this and I'm wasting time reinventing the wheel?

Requirements

• I can't upgrade to .NET 4.x right now; I'm limited to 2.0.
• I would prefer a solution that doesn't involve adding external assemblies.

Answer 1

Found what I consider a somewhat clunky solution. Basically I iterate through each member element, manipulate the clone and remove the original:

<script>
    $(':not([nexttype=""])').each(
        function () {
            var _c = $(this).clone();
            _c.attr('type', $(this).attr('nexttype'));
            _c.removeAttr('nexttype');
            _c.insertAfter($(this)).prev().remove();
        });
</script>

Still accepting more elegant solutions than this.