HTMLInputElement - dormouseroared/dom-inspector-plus GitHub Wiki

The HTMLInputElement is a JavaScript interface in the Web API that represents an HTML <input> element in the DOM. It provides properties and methods to interact with and manipulate <input> elements, such as text fields, checkboxes, radio buttons, and more. It inherits from HTMLElement, which itself inherits from Element, so it includes all the properties and methods of those interfaces, plus input-specific ones.

• Purpose: Allows JavaScript to access and control <input> element attributes, values, and behaviors.
• Defined in: Web API (DOM), available in browsers.
• Common Use: Accessing user input, validating forms, or dynamically updating input properties.

Here are some commonly used properties (many of which were covered earlier) that provide useful information:

• value: Gets/sets the current value of the input (e.g., "text" for a text input).
• type: The input type (e.g., "text", "checkbox", "radio", "email").
• name: The name attribute for form submission.
• id: The unique identifier of the input.
• className: The CSS class(es) of the input.
• checked: Boolean for whether a checkbox or radio input is selected.
• disabled: Boolean indicating if the input is disabled.
• required: Boolean indicating if the input is required for form submission.
• placeholder: The placeholder text for text-based inputs.
• dataset: An object containing custom data-* attributes.
• maxLength: Maximum number of characters allowed (for text inputs).
• pattern: Regex pattern for validation (for text, email, etc.).
• min, max, step: Numeric constraints for number or range inputs.
• autocomplete: The autocomplete behavior (e.g., "on", "email").
• form: The parent <form> element, if any.

• focus(): Sets focus on the input.
• blur(): Removes focus from the input.
• select(): Selects the text in a text-based input.
• setCustomValidity(message): Sets a custom validation message for form validation.
• checkValidity(): Returns true if the input passes validation, false otherwise.
• reportValidity(): Checks validity and displays the browser’s validation UI if invalid.

<input id="myInput" type="text" name="username" value="john" placeholder="Enter name" required>
<script>
  const input = document.querySelector('#myInput');
  if (input instanceof HTMLInputElement) {
    const usefulProps = {
      value: input.value,
      type: input.type,
      name: input.name,
      id: input.id,
      placeholder: input.placeholder,
      required: input.required,
      dataset: input.dataset
    };
    console.log(usefulProps);
    // Example method usage
    input.focus(); // Focus the input
    console.log(input.checkValidity()); // Check if input is valid
  } else {
    console.error('Element is not an HTMLInputElement.');
  }
</script>

{
  "value": "john",
  "type": "text",
  "name": "username",
  "id": "myInput",
  "placeholder": "Enter name",
  "required": true,
  "dataset": {}
}

To display only truthy properties (as per your original question), you can filter HTMLInputElement properties:

document.addEventListener('DOMContentLoaded', () => {
  const input = document.querySelector('#myInput');
  if (input instanceof HTMLInputElement) {
    const truthyProps = Object.entries(input)
      .filter(([key, value]) => !!value && [
        'value', 'type', 'name', 'id', 'className', 'checked', 'disabled',
        'required', 'placeholder', 'maxLength', 'pattern', 'min', 'max',
        'step', 'autocomplete', 'dataset'
      ].includes(key))
      .reduce((obj, [key, value]) => ({ ...obj, [key]: value }), {});
    
    const output = document.createElement('pre');
    output.textContent = JSON.stringify(truthyProps, null, 2);
    document.body.appendChild(output);
  } else {
    console.error('Element with ID "myInput" not found or not an input element.');
  }
});

• Type Checking: Use instanceof HTMLInputElement to ensure the element is an <input> before accessing input-specific properties.
• Truthy Values: Some properties like value can be an empty string (falsy). If you want to include empty strings, adjust the filter to value !== undefined && value !== null.
• Input Type Specificity: Properties like checked, min, or max are only relevant for certain input types (e.g., checkbox, number).
• Browser Compatibility: HTMLInputElement is universally supported in modern browsers, but some properties (e.g., pattern) may behave differently based on the input type or browser.

If you need help with a specific HTMLInputElement property, method, or use case (e.g., form validation, event handling), let me know!