https://github.com/goto-bus-stop/dom-autofocus

focus an element when it enters the dom
https://github.com/goto-bus-stop/dom-autofocus

Last synced: 27 days ago
JSON representation

focus an element when it enters the dom

• Host: GitHub
• URL: https://github.com/goto-bus-stop/dom-autofocus
• Owner: goto-bus-stop
• License: other
• Created: 2018-03-29T12:34:32.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2023-05-31T04:58:59.000Z (over 1 year ago)
• Last Synced: 2024-10-05T16:25:52.287Z (about 1 month ago)
• Language: JavaScript
• Size: 19.5 KB
• Stars: 10
• Watchers: 3
• Forks: 0
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# dom-autofocus

focus an element when it enters the dom

## Why?

Because the `autofocus` attribute only works on page load.

This module uses a [MutationObserver](https://github.com/shama/on-load) to call `.focus()` immediately after the element is mounted.

[![npm][npm-image]][npm-url]

[![travis][travis-image]][travis-url]

[![standard][standard-image]][standard-url]

[npm-image]: https://img.shields.io/npm/v/dom-autofocus.svg?style=flat-square

[npm-url]: https://www.npmjs.com/package/dom-autofocus

[travis-image]: https://img.shields.io/travis/goto-bus-stop/dom-autofocus.svg?style=flat-square

[travis-url]: https://travis-ci.org/goto-bus-stop/dom-autofocus

[standard-image]: https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square

[standard-url]: http://npm.im/standard

## Install

```

npm install dom-autofocus

```

## Usage

`dom-autofocus` works well with non-virtual DOM diffing libraries like choo:

```js

var autofocus = require('dom-autofocus')

var html = require('choo/html')

module.exports = function view () {

  return html`

    

      Type here:

      ${autofocus(html`

        

      `)}

    

  `

}

```

## API

### `el = autofocus(el)`

Autofocus the element when it enters the DOM. Returns the input `el`.

## License

[Apache-2.0](LICENSE.md)