In my html code:

<div data-role="fieldcontain" id="containdiv" class="no-field-separator">
    <label for="field1" class="ui-hidden-accessible">To</label>
    <input type="search" name="field1" id="field1" autocorrect="off" autocapitalize="off" autocomplete="off" placeholder="Field #1?" value="" />
    <input type="hidden" id="field1val" name="field1val"/>
</div>

In the DOM, after being processed by jQUery mobile, has inserted the follwing element

<span role="status" aria-live="polite" class="ui-helper-hidden-accessible"></span>

In between my search input and my hidden input.

As the user types in my search input, I do some stuff, and update the value of the hidden field with it.

As this happens, I notice that this span (with class "ui-helper-hidden-accessible") has its content updated with the value of the hidden input.

I am not sure what is happening, or what this is triggered by.

Investigating, I have found that:

The purpose of this field is actually for it to be "hidden but still accessible", however, this does not appear to be the case - it renders as visible within the browser.

Is there a way to disable jQuery from creating this element within my form?

In my html code:

<div data-role="fieldcontain" id="containdiv" class="no-field-separator">
    <label for="field1" class="ui-hidden-accessible">To</label>
    <input type="search" name="field1" id="field1" autocorrect="off" autocapitalize="off" autocomplete="off" placeholder="Field #1?" value="" />
    <input type="hidden" id="field1val" name="field1val"/>
</div>

In the DOM, after being processed by jQUery mobile, has inserted the follwing element

<span role="status" aria-live="polite" class="ui-helper-hidden-accessible"></span>

In between my search input and my hidden input.

As the user types in my search input, I do some stuff, and update the value of the hidden field with it.

As this happens, I notice that this span (with class "ui-helper-hidden-accessible") has its content updated with the value of the hidden input.

I am not sure what is happening, or what this is triggered by.

Investigating, I have found that: http://forum.jquery.com/topic/ui-helper-hidden-accessible-change

The purpose of this field is actually for it to be "hidden but still accessible", however, this does not appear to be the case - it renders as visible within the browser.

Is there a way to disable jQuery from creating this element within my form?

• javascript
• jquery
• html
• css
• jquery-mobile

• Can you recreate the problem in jsFiddle? Your fragment of markup with just JQM renders as expected (input hidden is hidden) and no such span in DOM. – peterm Commented Jan 13, 2013 at 6:35
• This might help: jquerymobile.com/demos/1.2.0/docs/forms/docs-forms.html – user235273 Commented Jan 13, 2013 at 6:38

4 Answers 4

Hide the class on focus:

$( ".selector" ).autocomplete({
focus: function (event, ui) {
                $(".ui-helper-hidden-accessible").hide();
                event.preventDefault();
            }
});

You can try this.

.ui-helper-hidden-accessible { display:none; }

Not sure if you can disable what jQuery Mobile is doing, but if I'm understanding your needs, have you tried something like just hiding the element?

$(".ui-helper-hidden-accessible").hide();

Hope this helps.

Try this :

$(".ui-helper-hidden-accessible").remove();