如何通过移动端实现字母A至Z的滑动触摸快速选择功能？

本文共计537个文字，预计阅读时间需要3分钟。

使用面向对象封装，几句话即可实现移动端键盘的字符选择操作，代码如下：

javascript(function($, window) { function Keyboard(selector, chars, callback) { this.selector=selector; this.chars=chars; this.callback=callback; }

Keyboard.prototype.seleChar=function() { var self=this; $(self.selector).on('click', '.char', function() { var selectedChar=$(this).text(); self.callback(selectedChar); }); };

// 示例用法 new Keyboard('#keyboard', ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'], function(ret) { console.log('Selected character:', ret); }).seleChar();})(jQuery, window);

使用面向对象封装，几句话可以实现移动端酷炫的字幕选择操作，使用$("selector").seleChar({
chars:['A','B','C','D','E','F','G','H'],
callback:function(ret){

}
});

1.[代码][JavaScript]代码

;(function($,window,document,undefined){ var SelectChar = function(el,opts){ this.ele = el; this.defaults = { chars:['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'], callback:function(ret){ }, }; this.options = $.extend({},this.defaults,opts); this.eleWidth = $(this.ele).width(); this.charslength = this.options.chars.length; this.eleHeight = $(this.ele).height()*0.96; if(this.charslength < 13){ this.eleHeight = this.charslength*30; } this.everyCharHeight = this.eleHeight/this.charslength; }; SelectChar.prototype = { init:function(){ $(this.ele).css("position","relative"); this.show(); return this; }, show:function(){ var cnt = ''; cnt += '<section id="seleMask" style="width:'+this.eleWidth+'px;height:'+this.eleHeight+'px;position:absolute;top:0;left:0;z-index:9999">'; cnt += '<div id="bigChar" style="position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);-webkit-transform: translate(-50%,-50%);width: 70px;height: 70px;line-height: 70px;text-align: center;background: rgba(0,0,0,.7);border-radius: 5px;color: #fff;font-size: 32px;z-index: 999;display:none"></div>'; cnt += '<div id="smallChar" style="position: absolute;top:0;right:0;width:40px;height:'+this.eleHeight+'px;cursor:pointer">'; for(var i = 0;i<this.charslength;i++){ cnt += '<div style="width: 100%;height:'+this.everyCharHeight+'px;line-height:'+this.everyCharHeight+'px;text-align: center;font-size: 10px;color: #999;">'+this.options.chars[i]+'</div>'; } cnt == '</div></section>'; $(this.ele).prepend(cnt); this.addEvent(); return this; }, hide:function(){ return this; }, addEvent:function(){ var eve,options,result; eve = this.everyCharHeight; options = this.options; document.getElementById("smallChar").addEventListener("touchstart",function(touch){ $("#bigChar").show(); if(touch.touches[0].pageY){ var _val = Math.floor((touch.touches[0].pageY - $(this).offset().top)/eve); result = options.chars[_val]; $("#bigChar").html(result); } },false); document.getElementById("smallChar").addEventListener("touchmove",function(touch){ if(touch.touches[0].pageY){ var _val = Math.floor((touch.touches[0].pageY - $(this).offset().top)/eve); result = options.chars[_val]; $("#bigChar").html(result); } },false); document.getElementById("smallChar").addEventListener("touchend",function(touch){ $("#bigChar").hide(); if(result){ options.callback(result); } },false); return this; }, }; $.fn.seleChar = function(parse){ var selectchar = new SelectChar(this,parse); selectchar.init(); }; })(jQuery,window,document);