jQuery.mobile.degradeInputsWithin()

Categories: Methods

jQuery.mobile.degradeInputsWithin( target )Returns: Undefinedversion added: 1.4.0

Description: Alter the input type of form widgets.

Some native input types have undesirable native behavior. jQuery.mobile.degradeInputsWithin will alter the input type of such elements during page creation to fallback input types whose native behavior is acceptable. You can then achieve the user experience you desire by instantiating jQuery Mobile widgets on the modified native elements.

Example:

Degrading Inputs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery.mobile.degradeInputsWithin demo</title>
  <link rel="stylesheet" href="//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.css">
  <script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js"></script>
</head>
<body>
 
  <div data-role="header">
    <h2>jQuery Mobile Example</h2>
  </div>
  <div class="ui-content" role="main">
    <form>
      <fieldset>
        <div class="ui-field-contain">
          <label for="degraded-range">Type <code>range</code> degraded to <code>number</code></label>
          <input type="range" id="degraded-range" min="0" max="91" value="17"></input>
        </div>
        <div class="ui-field-contain">
          <label for="degraded-search">Type <code>search</code> degraded to <code>text</code></label>
          <input type="search" id="degraded-search"></input>
        </div>
        <div class="ui-field-contain">
          <label for="unchanged-url">Unchanged type <code>url</code></label>
          <input type="url" id="unchanged-url"></input>
        </div>
      </fieldset>
    </form>
  </div>
</body>
</html>

Demo: