jQuery模拟手机数字键盘

所属分类:输入-丰富的输入,快捷键

 6830  40  查看评论 (4)
jQuery模拟手机数字键盘 ie兼容10
相关插件-丰富的输入,快捷键

jQuery文本编辑器插件summernote

Summernote 是一个简单灵活的所见即所得的 HTML 在线编辑器,基于 jQuery 和 Bootstrap 构建,支持快捷键操作,提供大量可定制的选项。
  丰富的输入
 5326  48

纯javript emoji表情插件(原创)

一个可拓展的纯js的emoji表情插件,支持移动端
  丰富的输入
 3816  21

jQuery textarea显示限制输入字符

一个简单的动态显示限制输入字符
  丰富的输入
 1690  29

jquery仿牛客网的在线测评考试

实现在线模拟测评,仿照的是牛客网的测评页面
  丰富的输入
 7029  69

讨论这个项目(4)回答他人问题或分享插件使用方法奖励jQ币

    ヅ羽ぷ寒灬 3
    2017/10/19 9:33:56
    // 点击弹出数字键盘
            document.getElementsByClassName("shuru")[0].onclick = function(e){
                e.stopPropagation()
                document.getElementsByClassName("layer-content")[0].classList.add("show")
            }
    
            // 点击页面隐藏数字键盘
            document.getElementsByClassName("wrap-content")[0].onclick = function(e){
                e.stopPropagation()
                document.getElementsByClassName("layer-content")[0].classList.remove("show")
            }  
    
            // 累加键盘数字
            var keyBtn = document.getElementsByClassName('num');
            for (var i = 0; i < keyBtn.length; i++) {
                keyBtn[i].onclick = function () {
                    var oDiv = document.getElementById("div");
                     oDiv.innerHTML += this.innerHTML;
                }
            }
    
            // 键盘删除 退格
            document.getElementById('remove')[0].onclick = function(e){
                e.stopPropagation()
                var oDiv = document.getElementById("div");
                var oDivHtml = oDiv.innerHTML;
                oDiv.innerHTML = oDivHtml.substring(0, oDivHtml.length -1)
            }
    .layer-content {
    	position: fixed;
    	left: 0;
    	bottom: -3.4rem;
    	width: 100%;
    	height: auto;
    	z-index: 1000;
    	transition: bottom .3s linear;
    }			
    
    .layer-content.show{
    	position:fixed;
    	bottom:0;
    	left: 0;
    	z-index: 1000;
    	transition: bottom .3s linear;
    }

    将jquery代码改为原生js, 移动端尽量不要引入jquery 。弹出键盘改为css3动画 ,不使用jquery动画。键盘弹出层使用fixed定位,不用absolute ,这样即使键盘隐藏状态也在页面底部看不到键盘占据得出空间

    回复
    free. 0
    2017/9/13 14:52:09
    div的值怎么传给后台呢
        ヅ羽ぷ寒灬0
        2017/10/19 9:34:50

        获取div的inneHTML值

    回复
    buerwei 0
    2017/1/19 14:44:07

    一开始没什么丝路,看了作者的demo就有想法了

    回复
取消回复