There is a newer version of Luda.

Let's go!

Focus

Get a better focus effect in all browsers.

Introduction

The native focus behavior of browsers are wired and different. For better focus effect control, we use the .focus class instead of the :focus selector in Luda.

Except form elements, the .focus class will be added to a focusable element only when it’s focused through keyboard. For a form element, the .focus class will be added no matter how it’s focused.

This link will show an outline only when it’s focused through keyboard.

Focus me by pressing the tab key. 

<a href="#">Focus this link</a>

Button Examples

This button will show an outline only when it’s focused through keyboard.

<button class="btn btn-primary">Focus me through keyboard</button>

Form Examples

The border color of this text field will be changed no matter how the text field is focused.

<div class="fm fm-text">
  <input placeholder="E.g., focus behavior in a text field">
</div>

HTML Attributes

data-focus=”false”

<!-- @example
Add data-focus="false" to the <html> tag to disable
the enhancement to browser's native focus behavior.
-->
<html data-focus="false">...</html>

Javascript Methods

luda(selector).focus(addClass, preventScroll)

@param {LudaSelector} selector
@param {boolean} [addClass=true]
@param {boolean} [preventScroll=false]
@returns {LudaInstance}

// @example Focus a target by passing in a selector.
luda('#my-focusable').focus()

luda(selector).blur()

@param {LudaSelector} selector
@returns {LudaInstance}

// @example Blur a target by passing in a selector.
luda('#my-focusable').blur()