Form interaction

back edit

Auto select input text range on focus.

<input value="https://github.com/github/github.git" readonly data-autoselect autofocus class="form-control">

Disable a button on submit, replace the button text with the attribute content.

<form onsubmit="return false;">
  <button type="submit" data-disable-with="Saving" class="btn btn-primary">Save</button>
</form>

Confirm the activation with a question specified with data-confirm. Adding data-confirm-checked on a checkbox will make sure the dialog only pops up when going from unchecked to checked.

<form onsubmit="return false;">
  <label class="d-block mb-3">
    <input type="checkbox"
      data-confirm-checked
      data-confirm="Content created by this user will also be deleted. Are you sure?">
    Delete activity history
  </label>
  <button
    type="submit"
    data-confirm="Hubot will lose all access to GitHub repositories. Are you sure?"
    class="btn btn-danger">Remove user</button>
</form>

Set an input as indeterminate on load.

<input type="checkbox" data-indeterminate>