[Vue3 CompositionAPI]カンマ区切りのinputコンポーネントを作成する - Qiita
成果物 CodeSandBoxでソースコードを書きました。 こちらで主題のinputコンポーネントの挙動を確認してみてください！ CodeSandBox上で書いたコード 実装 主題のinputコンポーネント <template> <input :value="commaSeparetedValue" v-on:focus="onFocus" v-on:blur="onBlur" @input="onInput" /> </template> <script> import { ref, computed, defineComponent } from "vue"; export default defineComponent({ props: { modelValue: { required: true, }, }, setup(props, context) { const isFocu
![[Vue3 CompositionAPI]カンマ区切りのinputコンポーネントを作成する - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/cb3a684506ff140b2dd5b65c2281a6a1d71b4d3e/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCVnVlMyUyMENvbXBvc2l0aW9uQVBJJTVEJUUzJTgyJUFCJUUzJTgzJUIzJUUzJTgzJTlFJUU1JThDJUJBJUU1JTg4JTg3JUUzJTgyJThBJUUzJTgxJUFFaW5wdXQlRTMlODIlQjMlRTMlODMlQjMlRTMlODMlOUQlRTMlODMlQkMlRTMlODMlOEQlRTMlODMlQjMlRTMlODMlODglRTMlODIlOTIlRTQlQkQlOUMlRTYlODglOTAlRTMlODElOTklRTMlODIlOEImdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWMzZDIwOTJiMzZkYzEwNzlmYjBkOGM4ZTJhZGI2MjIx%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBzdXp1a2kxMTA4JnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1hOTUyODhjMTc2NjMzOTE4NDU5YjRkMDkxNjEyNWVhYw%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3Df068665bb1643cdbbbd2aa268261a4e2)
あまり知られていない、フォームをCSSでスタイルするために役立つ便利なセレクタとその使い方
フォームをCSSでスタイルするのは難しいと思われていました。しかし、input要素とそれに関連する要素をスタイルするためのあまり知られていないセレクタがあります。いくつかは比較的新しいセレクタですが、昔から存在するセレクタもあります。 フォームの見た目だけでなく、機能も強化するCSSの便利なセレクタとその使い方を紹介します。 Advanced CSS-Only Form Styling by Jonathan Harrell 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 フォームにスタイルを適用したデモ :placeholder-shown :required :optional :disabled :read-only :valid :invalid :in-range/:out-of-range :checked フォーム
Input Masking | CSS-Tricks
Get affordable and hassle-free WordPress hosting plans with Cloudways — start your free trial today. I don’t have any UX research to cite, but anecdotally, I like it when inputs that expect data in a specific format use an input mask. I thought I’d just line up a few demos for really easy reference. Robin Herbots’s (jQuery) Inputmask This is an actively maintained plugin. See the Pen jQuery Input
入力文字に応じて自動伸縮するinput[type=text]を実装できるjQueryプラグイン「autoGrowInput」:phpspot開発日誌
jQuery autoGrowInput Plugin 入力文字に応じて自動伸縮するinput[type=text]を実装できるjQueryプラグイン「autoGrowInput」 textareaが自動リサイズするものはよく見かけたのですが、input[type=text]が横に伸びるのはありそうでなかったかも 関連エントリ 超カッコ良い検索フォームのチュートリアル＆デモ クールでモダンなコンタクトフォームのデモ＆サンプルスクリプト 料金テーブルから即サインアップフォームにつなげるデモ フォーム要素をフラットかつ全デバイスで統一させるjQueryプラグイン「Formplate」 フォームにて入力の入力UIを追加できる「jquery.signfield」
なんだかちょっと楽しい...。フォームの新しい入力属性と疑似クラス | バシャログ。
こんにちは。mackyです。いやー、夏ですね。夏が終わったらもう年末ですね。私は毎年この時期から猛スピードで一年が終わります。早く走らないと。。詳しくはコチラをご覧ください。 さて、今日は、HTML5で新しく追加された入力属性にちょっと「なんか楽しいかも...」と感じたので、この気持ちが冷めないうちにまとめることにしました。 autofocus オートフォーカス。 ページを開いたときにフォーカスされるようになる。ちなみに、emailはHTML5で追加されたtype属性の値で、メールアドレス専用のキーボードを表示させることが出来る。 <form> <label>お名前: <input type="text" name="name" class="text" autofocus/></label> </form> お名前: autocomplete オートコンプリート。 入力候補はdatali
textarea,inputの特定テキストをハイライトできる「jQuery highlightTextarea」:phpspot開発日誌
textarea,inputの特定テキストをハイライトできる「jQuery highlightTextarea」 2014年06月24日- jQuery highlightTextarea textarea,inputの特定テキストをハイライトできる「jQuery highlightTextarea」 長いテキストエリア内でキーワードをハイライトさせる機能があれば便利そうですが、こちらのjQueryプラグインで実現できるようです プラグイン導入後、次のようなコードで文字をハイライトできます 予め指定したワードはtextareaを変更した場合にもハイライトされるので、予約語をハイライトしたり、 promptでユーザの入力を受けてハイライトすると便利かも。 関連エントリ textareaでオートコンプリートできるようにするjQueryプラグイン「jquery-textcomplete」 iPh
[HTML5]datalist要素の基本的な使い方・応用(WordPressで全タグを検索の入力候補にしたりする)
調べる。 備忘録としてwebやデザインについて調べたり 新しく知ったことなどを書き残していくカテゴリです。 datalist要素とは HTML5で新しく加わったdatalist要素は、list属性で紐付けられたinput要素にユーザーが入力する際に、datalist要素内に置かれたoption要素の値をその入力候補として表示させる為の要素です。 datalistタグ内に入力候補としたいワードをvalue属性に持つoptionタグを複数記述します。 <form method="get" action=""> <input type="text" list="tools"> <datalist id="tools"> <option value="手裏剣"> <option value="まきびし"> <option value="煙玉"> </datalist> <input type="s
![[HTML5]datalist要素の基本的な使い方・応用(WordPressで全タグを検索の入力候補にしたりする)](https://cdn-ak-scissors.b.st-hatena.com/image/square/778ae00a3dda92b39324406dab3406d3736f6df8/height=288;version=1;width=512/http%3A%2F%2Fwebcre8.jp%2Fwordpress%2Fwp-content%2Fuploads%2F2013%2F04%2Fhtml5-tag-datalist-01-150x150.png)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Cleave.js - Format input text content when you are typing - Designbeep
数値のみ入力させたい場合のUIを実現できる「numble」:phpspot開発日誌