view release on metacpan or  search on metacpan

lib/HTML/Object/DOM/Element/Input.pm  view on Meta::CPAN

    <p>
        <label>Enter how many values of step you would like to increment by or leave it blank:
            <input type="number" step="1" id="incrementer" min="0" max="25" />
        </label>
    </p>
    <input type="button" value="Increment" id="theButton" />

    # make the $button call the function
    my $button = $doc->getElementById('theButton')
    $button->addEventListener( click => sub
    {
        &steponup();
    })

    sub steponup
    {
        my $input = $doc->getElementById('theNumber');
        my $val = $doc->getElementById('incrementer')->value;
        # increment with a parameter
        if( $val )
        {
            $input->stepUp( $val );
        }
        # or without a parameter. Try it with 0
        else
        {
            $input->stepUp();
        }
    }

Another example:

    <input max="4096" min="1" name="size" step="2" type="number" value="4096" id="foo" />

See also L<Mozilla documentation|https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/stepUp>, and L<Mozilla documentation on step|https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/step>

=head1 EVENTS

Event listeners for those events can also be found by prepending C<on> before the event type:

For example, C<input> event listeners can be set also with C<oninput> method:

    $e->oninput(sub{ # do something });
    # or as an lvalue method
    $e->oninput = sub{ # do something };

=head2 input

Fires when the value of an C<input>, C<select>, or C<textarea> element has been changed. Note that this is actually fired on the L<HTML::Object::DOM::Element> interface and also applies to contenteditable elements, but we've listed it here because it...

Example:

    <input placeholder="Enter some text" name="name" />
    <p id="values"></p>

    my $input = $doc->querySelector('input');
    my $log = $doc->getElementById('values');

    $input->addEventListener( input => \&updateValue );

    sub updateValue
    {
        my $e = shift( @_ );
        $log->textContent = $e->target->value;
    }

See also L<Mozilla documentation|https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event>

=head2 invalid

Fired when an element does not satisfy its constraints during constraint validation. Also available via the oninvalid event handler property.

Example:

    <form action="#">
        <ul>
            <li><label>Enter an integer between 1 and 10: <input type="number" min="1" max="10" required></label></li>
            <li><input type="submit" value="submit"></li>
        </ul>
    </form>
    <p id="log"></p>

    my $input = $doc->querySelector('input');
    my $log = $doc->getElementById('log');

    $input->addEventListener( invalid => \&logValue );
    sub logValue
    {
        my $e = shift( @_ )l
        $log->textContent = $e->target->value;
    }

See also L<Mozilla documentation|https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event>

=head2 search

Fired when a search is initiated on an <input> of type="search". Also available via the onsearch event handler property.

Example:

    # addEventListener version
    my $input = $doc->querySelector('input[type="search"]');

    $input->addEventListener( search => sub
    {
        say( "The term searched for was " . $input->value );
    })

    # onsearch version
    my $input = $doc->querySelector( 'input[type="search"]' );

    $input->onsearch = sub
    {
        say( "The term searched for was " + $input->value );
    })

See also L<Mozilla documentation|https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/search_event>

=head2 selectionchange

Fires when the text selection in a C<input> element has been changed.