awesome-repositories.com
博客
MCP
awesome-repositories.com

通过 AI 驱动的搜索，发现最优秀的开源仓库。

探索精选搜索开源替代品自托管软件博客网站地图
项目MCP 服务器关于排名机制媒体报道
法律隐私政策服务条款
© 2026 Bringes Technology SRL·VAT RO45896025·hello@awesome-repositories.com
·
jessepollak avatar

jessepollak/card

0
View on GitHub↗
11,712 星标·1,495 分支·SCSS·MIT·6 次浏览

Card

This project provides a visual credit card form UI component and payment input visualizer. It creates an interactive checkout interface that displays a dynamic visual representation of a credit card, updating in real time as users enter payment details into a form.

The interface includes localized payment capabilities, allowing the replacement of default labels and validation messages with custom strings to support multiple languages. Users can customize visual fields and input placeholders to control the default text and symbols displayed during the checkout process.

The system manages real-time input formatting and validation for credit card numbers and expiration dates. It uses event-driven synchronization to map multiple form input elements to single visual fields on the card display.

Features

  • Credit Card UI Components - Provides a visual credit card representation that updates in real time as users enter payment details.
  • Real-time Synchronization - Synchronizes a visual card representation with form fields in real time as a user types.
  • Interactive Visualizations - Adds a dynamic visual credit card display to a payment form to improve the user experience during data entry.
  • Checkout Interfaces - Offers a set of customizable form fields and animations designed for payment data entry.
  • Credit Card Formatters - Formats credit card numbers and expiration dates in real-time to ensure correct data entry.
  • Dynamic Visualizations - Displays a dynamic visual representation of a credit card reflecting the payment details entered into a form.
  • Event-Driven State Synchronizers - Updates the visual card representation in real time by listening for input events from associated form fields.
  • Interactive Form Visualizations - Links standard input fields to a visual representation that updates instantly to guide users through checkout.
  • Payment Checkout Widgets - Implements a dynamic interface for formatting and displaying credit card numbers and expiration dates.
  • Real-time Input Formatting - Intercepts raw keystrokes to apply masks and spacing to credit card numbers and expiration dates.
  • Cards - Renders an interactive visual credit card that updates in real time as users enter payment details.
  • Placeholder Customization - Allows setting custom default text or symbols for the visual fields on a credit card display.
  • Declarative UI Components - Exposes visual customizations through a set of configurable properties that control placeholders and styles.
  • Two-Way Data Bindings - Links multiple independent input fields to a single display property on the visual card component.
  • Input Field Initializers - Enables changing the default text displayed inside payment input fields for names, numbers, and security codes.
  • Form Components - Interactive credit card form visualization.
  • Form Components - Friendly credit card input forms.

Star 历史

jessepollak/card 的 Star 历史图表jessepollak/card 的 Star 历史图表

AI 搜索

探索更多 awesome 仓库

用简单的语言描述您的需求 —— AI 将根据相关性为您从数千个精选开源项目中进行排序。

Start searching with AI

Card 的开源替代方案

相似的开源项目，按与 Card 的功能重合度排序。
  • amsul/pickadate.jsamsul 的头像

    amsul/pickadate.js

    7,659在 GitHub 上查看↗

    pickadate.js is a responsive jQuery date and time picker designed for web forms. It provides a localized input interface that allows users to select specific calendar dates and precise clock times. The library features a customizable calendar UI with configurable colors, sizes, and breakpoints. It includes a localization system to adapt interface text and date formats into multiple languages and regional settings. The component includes interactive date and time inputs and a styling system for modifying visual design to match specific brand identities. Its layout automatically adjusts for di

    JavaScript
    在 GitHub 上查看↗7,659
  • harvesthq/chosenharvesthq 的头像

    harvesthq/chosen

    21,980在 GitHub 上查看↗

    Chosen is a JavaScript library that transforms standard HTML select elements into searchable, user-friendly dropdown menus. It functions as a form input enhancement tool designed to improve the usability of long or complex selection lists. The library provides a multi-select interface that allows users to manage multiple options with selection limit controls and clear buttons. It also includes built-in support for right-to-left languages, adjusting the layout and text direction of the user interface components accordingly. The project covers a range of selection interface capabilities, inclu

    HTMLdeprecatednot-maintained
    在 GitHub 上查看↗21,980
  • leaverou/awesompleteLeaVerou 的头像

    LeaVerou/awesomplete

    6,979在 GitHub 上查看↗

    Awesomplete is a lightweight JavaScript library for adding searchable suggestion lists to text fields. It functions as an HTML-based autocomplete widget that renders filtered results from arrays, HTML elements, or comma-separated strings with zero external dependencies. The library includes a customizable suggestion engine that allows for the definition of custom matching logic, sorting rules, and trigger thresholds. It is designed as an event-driven UI component, providing a programmable interface to intercept selection events and manage the state of the suggestion popup. The system support

    JavaScript
    在 GitHub 上查看↗6,979
  • nosir/cleave.jsnosir 的头像

    nosir/cleave.js

    17,867在 GitHub 上查看↗

    Cleave.js is a JavaScript library that applies real-time visual formatting to form fields as users type. It provides specialized utilities to enforce visual patterns for credit cards, phone numbers, dates, times, and large numerals. The library includes predefined formatting rules for common data types, such as detecting credit card issuers to apply correct spacing and managing country-specific regional patterns for international phone numbers. It also supports large numeral grouping using Western, Indian, and Chinese numbering systems. Users can define custom input patterns using specific b

    JavaScriptcredit-cardcreditcardinput
    在 GitHub 上查看↗17,867
查看 Card 的所有 30 个替代方案→

常见问题解答

jessepollak/card 是做什么的？

This project provides a visual credit card form UI component and payment input visualizer. It creates an interactive checkout interface that displays a dynamic visual representation of a credit card, updating in real time as users enter payment details into a form.

jessepollak/card 的主要功能有哪些？

jessepollak/card 的主要功能包括：Credit Card UI Components, Real-time Synchronization, Interactive Visualizations, Checkout Interfaces, Credit Card Formatters, Dynamic Visualizations, Event-Driven State Synchronizers, Interactive Form Visualizations。

jessepollak/card 有哪些开源替代品？

jessepollak/card 的开源替代品包括： harvesthq/chosen — Chosen is a JavaScript library that transforms standard HTML select elements into searchable, user-friendly dropdown… amsul/pickadate.js — pickadate.js is a responsive jQuery date and time picker designed for web forms. It provides a localized input… leaverou/awesomplete — Awesomplete is a lightweight JavaScript library for adding searchable suggestion lists to text fields. It functions as… nosir/cleave.js — Cleave.js is a JavaScript library that applies real-time visual formatting to form fields as users type. It provides… davidstutz/bootstrap-multiselect — This project is a Bootstrap jQuery plugin that transforms standard HTML select elements into interactive dropdown… aehlke/tag-it — A jQuery UI plugin to handle multi-tag fields as well as tag suggestions/autocomplete.