Cxy-keyboard NPM

��f�L�f H5.��v

/ec�v.��v{|�W

number�pe�~.��v
digit�&^\pe�p�vpeW[.��v
idcard��N��.��v
ABC�S+TpeW[�TW[�k��SRbc0R0W:S.��v �
carNumberPre�f�LrMR.��v�0W:S.��v��SRbc0RABC.��v �
url�url.��v \�QW[�k+&{�S
URL�URL.��v 'Y�QW[�k+peW[

_eQ.��v�~�N

�ǏCDN_eQ1.3.0Hr,g�v`css`�T`js`

�cP��ǏCDN�v�e__eQ.��v�~�N��V:Nُ7h(W�Q�sbug�e�~N�O Y01.3.0Hr,g�vCDN.��v�~�NI{T�N�Ǐrequirebimport_eQ ~1.3.0 Hr,g�v.��v�~�N

<link type="text/css" rel="Stylesheet" href="//oss.cx580.com/public_script/cxy-keyboard-1.3.0/cxy-keyboard.css">
<script src="//oss.cx580.com/public_script/cxy-keyboard-1.3.0/cxy-keyboard.js"></script>

�Ǐrequirebimport_eQ.��v�~�N

��HQ�[ň>=1.3.2Hr,g�v.��v�~�N,

npm install --save cxy-keyboard

�~�N/f(ues6�Q�v�T�e7h/f�Ǐimport scss�v�e_eQ�v�@b�N_eQ.��v�~�N�e��M�nNwebpackeg�[�sscss�v_eQ�N�SES6�vl�x�ُ̑1\ NNN�~�

const cxyKeyboard = require('cxy-keyboard');
// b
// import cxyKeyboard from 'cxy-keyboard';

8^(u�e�l�

init
show
hide
onChange
switchKeyboard
isShow
inputs

_eQ.��vjsT�OX[(WN*NhQ@.��v�[�O�cxyKeyboard��S�ǏcxyKeyboard.init({...param})egR�YS.��v

init

.��vR�YS�cxyKeyboard.init({...param})

cxyKeyboard.init({
    // .��vDomCQ }�vId ؞���cxyKeyboard
    domId: 'cxyKeyboard',

    // ��eQFhR�YS
    inputs: [{
        // css	��bhV�
N/ec	�inputbtextareaI{��eQh~{��V:Nُ�Nh~{O�w��|�~.��v	�
        selectors: '#id',

        // �e��eQ�e�v�c:y
        placeholder: 'W[�kpeW[.��v',
        
        // .��v�v{|�W ؞���ABC�W[�kpeW[.��v	�
        type: 'ABC',

        // AQ��g'Y��^
        maxLength: 8,

        /** 
         * �cd��vckRĉR�Nb��vck_h�:y�SAQ����eQN*N\pe�p	�
         * S_��eQ�v�Q�[N�cd�ĉR9SM��e�R��eQ�v�Q�[�eHe���eQFh
NO>f:y��eQ�v^��l�Q�[
         */
        excludeRule: /\.{1}\d*\.+\d*/i,

        // >f:y.��v
N�e�v�[b	c��
        showDoneBtn: true,
    }]
});

show

f:y.��v�cxyKeyboard.show({...param},isSwitch)

// ���S.��v�v>f:y�r`
var isShow = cxyKeyboard.isShow;

// input��eQFh�v�Spe
var param = {
    selectors: '#id', // css	��bhV
    animation: !isShow, // .��v
NX[(W�eR>f:y�R;u
}

// >f:y.��v
cxyKeyboard.show(param, isShow);

hide

��υ.��v�cxyKeyboard.hide()

// ��υ.��v
cxyKeyboard.hide();

onChange

.��v��eQ�v�Q�[�Su�SS�cxyKeyboard.onChange(value, activeId)

// �Q�[�Su9e�S
cxyKeyboard.onChange = function (value, activeId) {
    console.log('.��v�v�Q�[�' + value);
    console.log('S_MR;mÍ��eQFh�vcss	��bhV�' + activeId);
};

switchKeyboard

Rbc.��v�cxyKeyboard.onChange('URL')

// Rbc.��v��~bS_MR��eQFh�v@b	g�Q�[	�
cxyKeyboard.switchKeyboard('ABC');

isShow

.��vY�N>f:y.��v�vhƋ&{�cxyKeyboard.isShow

inputs

��SS_MR@b g��eQFh�v�Oo�cxyKeyboard.inputs`

// ���S�g*N��eQFh�v�Q�[ 'selectors'h�:y��eQFh�vcss	��bhV
console.log(cxyKeyboard.inputs[selectors].value);

7h_�O9e

��[�sW[SO0L�ؚ0�[P�I{He�g��v�c(Wy��v-N͑�Q�[�^�vcss{|�

:y�O�

.ys-keyboard-input{
    float: right; // ��eQFh�S�[P�
}

�S�v,T�v�N�N

cxyKeyboard_show
cxyKeyboard_hide
cxyKeyboard_switchKeyboard
cxyKeyboard_addValue
cxyKeyboard_deleteValue
cxyKeyboard_done

cxyKeyboard_show

.��v>f:y�N�N�

window.addEventListener('cxyKeyboard_show', function() {
    console.log('.��v>f:y�N')
})

cxyKeyboard_hide

.��v��υ�N�N�

window.addEventListener('cxyKeyboard_hide', function() {
    console.log('.��v��υ�N')
})

cxyKeyboard_switchKeyboard

.��vRbc�N�N�

window.addEventListener('cxyKeyboard_switchKeyboard', function() {
    console.log('.��vRbc�N')
})

cxyKeyboard_addValue

�e�X�Q�[�N�N�

window.addEventListener('cxyKeyboard_addValue', function() {
    console.log('�e�X�Q�[�N')
})

cxyKeyboard_deleteValue

Rd��Q�[�N�N�

window.addEventListener('cxyKeyboard_deleteValue', function() {
    console.log(' Rd��Q�[�N')
})

cxyKeyboard_done

�p�Q�[b c��

window.addEventListener('cxyKeyboard_done', function() {
    console.log('�p�Q�N�[b	c��')
})

�b/g�ech

�p�Q�gw�f��~�v�ech�f

�[te�vdemo

�p�Q�gwdemo

<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8" />
    <meta name="Cache-Control" content="private">
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="minimum-scale=1, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>H5.��vdemo</title>
    <style>
        * {
            user-select: none;
            -webkit-tap-highlight-color: rgba(255, 0, 0, 0);
        }

        div {
            user-select: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            -webkit-tap-highlight-color: rgba(255, 0, 0, 0);
            font-size: 16px;
        }

        .input {
            margin: 20px auto;
            width: 80%;
            padding: 2px;
            min-height: 20px;
            overflow: auto;
            word-break: break-all;
            border: 1px solid #000;
            font-size: 14px;
            line-height: 1.5;
        }
    </style>
</head>

<body>
    <div id="carNumberKeyboard" class="input" onclick="show('#carNumberKeyboard')"></div>
    <div id="numberKeyboard" class="input" onclick="show('#numberKeyboard')"></div>
    <div id="digitKeyboard" class="input" onclick="show('#digitKeyboard')"></div>
    <div id="idcardKeyboard" class="input" onclick="show('#idcardKeyboard')"></div>
    <div id="urlKeyboard" class="input" onclick="show('#urlKeyboard')"></div>
	
	<link type="text/css" rel="Stylesheet" href="//oss.cx580.com/public_script/cxy-keyboard-1.3.0/cxy-keyboard.css">
    <script src="//oss.cx580.com/public_script/cxy-keyboard-1.3.0/cxy-keyboard.js"></script>
    <script>
        // 9hncO\U^�[�^ꁨR��nu�b��vW[SO'Y\
        !function (n, e) {
            var t = n.documentElement, i = "orientationchange" in window ? "orientationchange" : "resize", d = function () {
                var n = t.clientWidth;
                if (n) {
                    var e = 50 * (n / 375);
                    e = e > 54 ? 54 : e;
                    t.style.fontSize = e + "px";
                    var s = getComputedStyle ? getComputedStyle(t, false)['fontSize'] : '';
                    s = (s.substr(0, s.length - 2)) * 1;
                    if (s && e !== s) {
                        t.style.fontSize = e * (e / s) + "px";
                    }
                }
            };
            n.addEventListener && (e.addEventListener(i, d, !1), n.addEventListener("DOMContentLoaded", d, !1))
        }(document, window);

        // �[�OS.��v
        window.cxyKeyboard.init({
            inputs: [{
                selectors: '#carNumberKeyboard',
                placeholder: 'f�Lr�Sx.��v(	g�[b	c���P�6R�N��^:N8�N	��bf�LrMRTꁨRRbcbW[�k.��v��SꁨRRbcN!k)',
                type: 'carNumberPre',
                maxLength: 8,
                showDoneBtn: true,
            }, {
                selectors: '#numberKeyboard',
                placeholder: 'peW[.��v�P�6R�N��^:N11	�',
                type: 'number',
                value: '13800000000',
                maxLength: 11,
            }, {
                selectors: '#digitKeyboard',
                placeholder: '&^\pe�p�vpeW[.��v��S����eQN*N\pe�p�	g�[b	c��	�',
                type: 'digit',
                excludeRule: /\.{1}\d*\.+\d*/i, // �cd��vckRĉR
                showDoneBtn: true,
            }, {
                selectors: '#idcardKeyboard',
                placeholder: '���N����eQ.��v',
                type: 'idcard',
            }, {
                selectors: '#urlKeyboard',
                placeholder: 'URL.��v�P�6R��^:N100�	g�[b	c��	�',
                type: 'url',
                maxLength: 100,
                showDoneBtn: true,
            }]
        });

        // �Q�[�Su9e�S
        cxyKeyboard.onChange = function (value, activeId) {
            if (activeId === '#carNumberKeyboard') {
                if (!window.autoSwitchKeyboard) {
                    window.autoSwitchKeyboard = true; // �SꁨR.^(u7bRbcN!k.��v
                    if (value.length === 1) {
                        // ꁨRRbcbW[�k.��v
                        cxyKeyboard.switchKeyboard('ABC');
                    }
                }
            }

            console.log('S_MR@b	g��eQFh�v��~�Oo`�', cxyKeyboard.inputs);
        };

        function show(id) {
            var isShow = cxyKeyboard.isShow;
            var param = {
                selectors: id,
                animation: !isShow, // .��v
NX[(W�eR>f:y�R;u
            }

            // .��v�Y�gX[(W�RRbc.��v0
NX[(WR>f:y.��v
            cxyKeyboard.show(param, isShow);
        }
    </script>
</body>

</html>

cxy-keyboard keyboard h5-keyboard YS-keyboard H5键盘违章键盘

@infinitebrahmanuniverse/nolb-cx @everything-registry/sub-chunk-1432 @zalastax/nolb-cx

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago