jQuery模拟手机数字键盘

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

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

[力荐]表情选择器

完全自定义的表情选择器。
  丰富的输入
 33748  167

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

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

EmojiOne表情符号所见即所得的文本编辑器

emojionearea.js是一款可集成EmojiOne表情符号的所见即所得的jQuery文本编辑器插件。emojionearea.js允许你将任何的HTML元素转换为WYSIWYG文本编辑器,并且它能够在编辑器中使用Emojione图标。
  丰富的输入
 7214  52

jQuery评论写入jquery.cookie.js

一个简单的评论框
  丰富的输入
 8715  64

讨论这个项目(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就有想法了

    回复
取消回复