OpenJS Foundation - openjsf.org · api.jquery.com

input selector

Description: Selects all input, textarea, select and button elements.

  • version added: 1.0jQuery( ":input" )

The :input selector basically selects all form controls.

Additional Notes:

  • Because :input is a jQuery extension and not part of the CSS specification, queries using :input cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method. To achieve the best performance when using :input to select elements, first select the elements using a pure CSS selector, then use .filter(":input").

Example:

Finds all input elements.

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

36

37

38

39

40

41

42

43

44

45

46

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>input demo</title>

<style>

textarea {

height: 25px;

}

</style>

<script src="https://code.jquery.com/jquery-4.0.0.js"></script>

</head>

<body>

<form>

<input type="button" value="Input Button">

<input type="checkbox">

<input type="file">

<input type="hidden">

<input type="image">

<input type="password">

<input type="radio">

<input type="reset">

<input type="submit">

<input type="text">

<select>

<option>Option</option>

</select>

<textarea></textarea>

<button>Button</button>

</form>

<div id="messages"></div>

<script>

var allInputs = $( ":input" );

var formChildren = $( "form > *" );

$( "#messages" ).text( "Found " + allInputs.length + " inputs and the form has " +

formChildren.length + " children." );

$( "form" ).on( "submit", function( event ) {

event.preventDefault();

} );

</script>

</body>

</html>

Demo:

Read the original on api.jquery.com ↗