jQuery :text Selector

What You’ll Learn

The :text selector matches every <input type="text"> element — and since jQuery 1.5.2, bare <input> with no type attribute too. Always prefer input:text over bare :text.

Introduction

Login forms, search bars, and name fields almost always use single-line text inputs. jQuery’s :text pseudo-class selects every input whose type is text — the default type when no type attribute is present.

Official jQuery documentation recommends prefixing with input — bare $(":text") implies $("*:text"). Since jQuery 1.5.2, :text matches inputs without a type attribute, which differs from the attribute selector [type=text].

Understanding the :text Selector

Think of :text as a shortcut for single-line text inputs:

• input:text → every text-type input in scope.
• <input> (no type) → matches :text since 1.5.2.
• <input type="password"> → use :password instead.
• <textarea> → not matched — different element tag.

📝 Syntax

Official jQuery API form (since 1.0):

jQuery( ":text" )

// recommended — prefix with input:
$( "input:text" )
$( "form input:text" )

// equivalent when type is explicit:
$( "input[type=text]" )

// :text vs [type=text] on bare <input>:
$( "input" ).is( ":text" );       // true (since 1.5.2)
$( "input" ).is( "[type=text]" ); // false

// native CSS (better performance):
document.querySelectorAll( 'input[type="text"]' )

// avoid on large pages:
$( ":text" )   // implies *:text

Parameters

• No arguments — keeps elements whose effective type is text.

Return value

• A jQuery object containing every matching text input (zero or more).

Official jQuery API example

var input = $( "form input:text" ).css({
  background: "yellow",
  border: "3px red solid"
});

$( "div" )
  .text( "For this type jQuery found " + input.length + "." )
  .css( "color", "red" );

Examples Gallery

Example 1 follows the official jQuery form input:text demo. Examples 2–5 cover the :text vs [type=text] difference, contrast with :password, scoped queries, and native performance.

var input = $( "form input:text" ).css({
  background: "yellow",
  border: "3px red solid"
});

$( "div" )
  .text( "For this type jQuery found " + input.length + "." )
  .css( "color", "red" );

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

For this type jQuery found 1.
Text input styled yellow with red border
Password and button inputs → unchanged

console.log( $( "input" ).is( "[type=text]" ) ); // false
console.log( $( "input" ).is( ":text" ) );       // true

// Since jQuery 1.5.2 — implied type="text"

false — [type=text] needs explicit attribute
true  — :text treats missing type as text

$( "input:text" ).addClass( "text-field" );
$( "input:password" ).addClass( "secret-field" );

// :text → plain text inputs only
// :password → masked password inputs only

Username → .text-field class
Password → .secret-field class (separate styling)

$( "#searchForm input:text" ).attr( "placeholder", "Search…" );

// loginForm text inputs are not affected

#searchForm text input → placeholder "Search…"
#loginForm text input → unchanged

$( 'input[type="text"]' ).addClass( "field" );

// Pure DOM (no jQuery pseudo-class):
document.querySelectorAll( 'input[type="text"]' );

Explicit type="text" inputs → .field class
Works in querySelectorAll — no :text extension needed

🚀 Common Use Cases

• Login forms — style or validate input:text username fields.
• Search bars — bind keyup handlers on scoped text inputs.
• Auto-focus — $("#form input:text").first().focus() on load.
• Clear fields — .val("") on every text input in a filter form.
• Trim whitespace — loop input:text and trim on blur.
• Performance — prefer input[type="text"] when type is always explicit.

📝 Notes

• Available since jQuery 1.0 — input elements of type text only.
• Since 1.5.2 — bare <input> without type also matches :text.
• jQuery extension only — not valid in native querySelectorAll(":text").
• Always use input:text — bare :text implies universal scan.
• Does not match textarea, password, email, or other specialized input types.
• Not the same as jQuery .text() content method.

💡 Best Practices