@@ -327,8 +327,8 @@ attribute on the input will automatically be set to `'true'`;
327 327 328 328
## Formatter support
329 329 330 -
`<b-form-input>` and `<b-form-textarea>` optionally supports formatting by passing a function
331 -
reference to the `formatter` prop.
330 +
`<b-form-input>` optionally supports formatting by passing a function reference to the `formatter`
331 +
prop.
332 332 333 333
Formatting (when a formatter function is supplied) occurs when the control's native `input` and
334 334
`change` events fire. You can use the boolean prop `lazy-formatter` to restrict the formatter
@@ -344,30 +344,36 @@ Formatting does not occur if a `formatter` is not provided.
344 344
```html
345 345
<template>
346 346
<div>
347 -
<label for="input-formatter">Text input with formatter (on input)</label>
348 -
<b-form-input
349 -
id="input-formatter"
350 -
v-model="text1"
351 -
:formatter="format"
352 -
placeholder="Enter your name"
353 -
aria-describedby="input-formatter-help"
354 -
></b-form-input>
355 -
<b-form-text id="input-formatter-help">
356 -
We will convert your name to lowercase instantly
357 -
</b-form-text>
358 -
<div>Value: {{ text1 }}</div>
359 - 360 -
<label for="input-lazy">Text input with lazy formatter (on blur)</label>
361 -
<b-form-input
362 -
id="input-lazy"
363 -
v-model="text2"
364 -
:formatter="format"
365 -
placeholder="Enter your name"
366 -
aria-describedby="input-lazy-help"
367 -
lazy-formatter
368 -
></b-form-input>
369 -
<b-form-text id="input-lazy-help">This one is a little lazy!</b-form-text>
370 -
<div>Value: {{ text2 }}</div>
347 +
<b-form-group
348 +
class="mb-0"
349 +
label="Text input with formatter (on input)"
350 +
label-for="input-formatter"
351 +
description="We will convert your name to lowercase instantly"
352 +
>
353 +
<b-form-input
354 +
id="input-formatter"
355 +
v-model="text1"
356 +
placeholder="Enter your name"
357 +
:formatter="format"
358 +
></b-form-input>
359 +
</b-form-group>
360 +
<p><b>Value:</b> {{ text1 }}</p>
361 + 362 +
<b-form-group
363 +
class="mb-0"
364 +
label="Text input with lazy formatter (on blur)"
365 +
label-for="input-lazy"
366 +
description="This one is a little lazy!"
367 +
>
368 +
<b-form-input
369 +
id="input-lazy"
370 +
v-model="text2"
371 +
placeholder="Enter your name"
372 +
lazy-formatter
373 +
:formatter="format"
374 +
></b-form-input>
375 +
</b-form-group>
376 +
<p class="mb-0"><b>Value:</b> {{ text2 }}</p>
371 377
</div>
372 378
</template>
373 379
@@ -464,9 +470,9 @@ from an array of options.
464 470
Vue does not officially support `.lazy`, `.trim`, and `.number` modifiers on the `v-model` of custom
465 471
component based inputs, and may generate a bad user experience. Avoid using Vue's native modifiers.
466 472 467 -
To get around this, `<b-form-input>` and `<b-form-textarea>` have three boolean props `trim`,
468 -
`number`, and `lazy` which emulate the native Vue `v-model` modifiers `.trim` and `.number` and
469 -
`.lazy` respectively. The `lazy` prop will update the v-model on `change`/`blur`events.
473 +
To get around this, `<b-form-input>` has three boolean props `trim`, `number`, and `lazy` which
474 +
emulate the native Vue `v-model` modifiers `.trim` and `.number` and `.lazy` respectively. The
475 +
`lazy` prop will update the v-model on `change`/`blur`events.
470 476 471 477
**Notes:**
472 478
@@ -480,6 +486,39 @@ To get around this, `<b-form-input>` and `<b-form-textarea>` have three boolean
480 486
optional formatting (which may not match the value returned via the `v-model` `update` event,
481 487
which handles the modifiers).
482 488 489 +
## Debounce support
490 + 491 +
As an alternative to the `lazy` modifier prop, `<b-form-input>` optionally supports debouncing user
492 +
input, updating the `v-model` after a period of idle time from when the last character was entered
493 +
by the user (or a `change` event occurs). If the user enters a new character (or deletes characters)
494 +
before the idle timeout expires, the timeout is re-started.
495 + 496 +
To enable debouncing, set the prop `debounce` to any integer greater than zero. The value is
497 +
specified in milliseconds. Setting `debounce` to `0` will disable debouncing.
498 + 499 +
Note: debouncing will _not_ occur if the `lazy` prop is set.
500 + 501 +
```html
502 +
<template>
503 +
<div>
504 +
<b-form-input v-model="value" type="text" debounce="500"></b-form-input>
505 +
<div class="mt-2">Value: "{{ value }}"</div>
506 +
</div>
507 +
</template>
508 + 509 +
<script>
510 +
export default {
511 +
data() {
512 +
return {
513 +
value: ''
514 +
}
515 +
}
516 +
}
517 +
</script>
518 + 519 +
<!-- b-form-input-debounce.vue -->
520 +
```
521 + 483 522
## Autofocus
484 523 485 524
When the `autofocus` prop is set, the input will be auto-focused when it is inserted (i.e.
@@ -533,10 +572,6 @@ component reference (i.e. assign a `ref` to your `<b-form-input ref="foo" ...>`
533 572
Refer to https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement for more information on
534 573
these methods and properties. Support will vary based on input type.
535 574 536 -
## Component alias
537 - 538 -
You can use `<b-form-input>` by it's shorter alias `<b-input>`.
539 - 540 575
## Using HTML5 `<input>` as an alternative
541 576 542 577
If you just need a simple input with basic bootstrap styling, you can simply use the following:
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4