Html - 幽灵键盘

Css

#shurufa_a,#shurufa_num,#shurufa_q,#shurufa_z{list-style:none;margin:15px auto;clear:both;padding:0;text-align:center}
#shurufa_gongneng,#shurufa_num_123,#shurufa_num_456,#shurufa_num_789{padding-left:0}
#shurufa_a li,#shurufa_gongneng li,#shurufa_num li,#shurufa_num_123 li,#shurufa_num_456 li,#shurufa_num_789 li,#shurufa_num_c0 li,#shurufa_q li,#shurufa_z li{display:inline-block;width:8%;padding:5px;border:1px solid #fff;text-align:center;background:0 0;line-height:30px;margin-right:5px;color:#fff;border-radius:7px;filter:progid:DXImageTransform.Microsoft.Shadow(color=#909090, direction=120, strength=3);-moz-box-shadow:2px 2px 10px #909090;-webkit-box-shadow:2px 2px 10px #909090;box-shadow:2px 2px 10px #909090}
#shurufa_num_123 li,#shurufa_num_456 li,#shurufa_num_789 li,#shurufa_num_c0 li{clear:both;width:19%;min-width:65px;padding:15px}
#shurufa_a li:active,#shurufa_gongneng li:active,#shurufa_num li:active,#shurufa_num_123 li:active,#shurufa_num_456 li:active,#shurufa_num_789 li:active,#shurufa_num_c0 li:active,#shurufa_q li:active,#shurufa_z li:active{background:#fff;color:#000}
#shurufa_input,#shurufa_input_num{width:30%;background:0 0;border-bottom:1px solid #fff;border-left:none;border-top:none;border-right:none;border-radius:0;text-align:left;color:#fff;margin:15px 10px 0 10px;float:left;padding-left:5px;font-size:17px}
#shurufa_input_num{float:none;width:30%;text-align:center}
.shurufa_gongnengtitle{float:right;padding-right:15px;margin-top:7px}

Html

<!-- 幽灵输入法  -->
<script type="text/template" id="shurufahtml">
    <input type="text" name="shurufa_input" readonly="readonly" id="shurufa_input"  placeholder="Input Something ..."/>
    <ul id="shurufa_gongneng">
        <li id="shurufa_back" class="mui-icon mui-icon-arrowthinleft" style="width: 100px;margin-top: 7px;"><h4 class="shurufa_gongnengtitle" >返回</h4></li>
        <li id="shurufa_clear" class="mui-icon mui-icon-trash" style="width: 100px;margin-top: 7px;"><h4 class="shurufa_gongnengtitle"  >清空</h4></li>
        <li id="shurufa_send" class="mui-icon mui-icon-paperplane" style="width: 100px;margin-top: 7px;" ><h4 class="shurufa_gongnengtitle">发送</h4></li>
    </ul>
    <ul id="shurufa_num">
        <li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>0</li>
    </ul>
    <ul id="shurufa_q">
        <li>Q</li><li>W</li><li>E</li><li>R</li><li>T</li><li>Y</li><li>U</li><li>I</li><li>O</li><li>P</li>
    </ul>
    <ul id="shurufa_a">
        <li>A</li><li>S</li><li>D</li><li>F</li><li>G</li><li>H</li><li>J</li><li>K</li><li>L</li>
    </ul>
    <ul id="shurufa_z">
        <li>Z</li><li>X</li><li>C</li><li>V</li><li>B</li><li>N</li><li>M</li>
    </ul>
</script>

JS

/* 打开幽灵键盘全版  */
var shurufa_open = function(e)
{
    var active_obj = e;        //获取子页面的对象
    $(".shurufa_input_active").removeClass("shurufa_input_active");
    $(e).addClass("shurufa_input_active"); //添加标志
    var val = $(e).val();
    var placehoder = $(e).attr("placeholder");
    var myinput = null;

    layer.open
    ({
        style: ‘width:100%;height:100%;background:rgba(0,0, 0, .2);margin: auto 0px;‘,
        content: $("#shurufahtml").html(),
        success:function()
        {
            $(".layermanim").css({"max-width":"100%"});
            $(".layermcont").css({"padding":"10px 20px 15px 20px"});
            $("#shurufa_input").val(val);
            $("#shurufa_input").attr("placeholder",placehoder); //替换placehoder
            myinput = $("#shurufa_input,.shurufa_input_active");

            document.onkeydown=function(event)
            {
                var e = event || window.event || arguments.callee.caller.arguments[0];
                var keyCode = e.keyCode || e.which;
                if(keyCode >= 48 && keyCode <= 57 || keyCode >= 96 && keyCode <= 105)
                {
                    var k = get_keycode(keyCode);
                    var key= $("#shurufa_input").val() +  k;
                    $("#shurufa_input,.shurufa_input_active").val(key);
                }
            }
        }
    }); 

    $("#shurufa_num li,#shurufa_q li,#shurufa_a li,#shurufa_z li").bind("click",function()
    {
        var str = $(this).text();
        var v = myinput.val() + str;
        myinput.val(v);
        $(active_obj).val(v);
    })

    $("#shurufa_back").bind("click",function()
    {
        var v = myinput.val();
        var value = v.substr(0,v.length - 1);
        myinput.val(value);
        $(active_obj).val(value);
    })

    $("#shurufa_clear").bind("click",function(){
        myinput.val("");
        $(active_obj).val("");
    })

    $("#shurufa_send").bind("click",function()
    {
        var myinput = $("#shurufa_input");
        var v = myinput.val();
        $(".shurufa_input_active").val(v);
        $(active_obj).val(v);
        layer.closeAll();
    })
}

使用方法：

1、引入css

2、引入HTML，你也可以将HTML转化为JS（http://www.css88.com/tool/html2js/），然后在页面中插入

对任意的input:text加入onclick = "shurufa_open(this) " 和 readonly="readonly" 如：

<input id="add_lianxiren" readonly="readonly" onclick="parent.shurufa_open(this)" type="text" value="" placeholder="请输入联系人" class="mui-input-clear" />