前言:一体机没有键盘,要想输入,需靠页面的输入功能,这时候就得自己动手了!!
二话不说,上代码,,可输入,可删除
/**
* @version: 1.0.0
* @author: chentiantian
*/
(function(window , $){
var NumberInput = function (ele , options) {
this.options = options;
this.ele = $(ele) ;
this.container ='.number-wrapper';
var num = [1,2,3,4,5,6,7,8,9,"删除",0,"确定"];
var h = this.createHtml(num);
var template = "<div class='number-wrapper'><ul class='n-lists'>"+h+"</ul></div>";
$(template).appendTo($('body'));
$(this.container).on('click','.n-item', $.proxy(this.itemClick, this));
$(this.ele).on('click', $.proxy(this.show, this));
$(document).on('click', $.proxy(this.hide, this));
this.init();
}
// 初始化
NumberInput.prototype.init = function(){
var op = {
width:'240',
height:'240'
}
$.extend( true ,op , this.options);
var t = this.ele.offset().top;
var l = this.ele.offset().left;
var h = this.ele.outerHeight();
t = t + h + 4 ;
// $('.number-wrapper').css({'top': t, "left":l , "width":op.width , "height":op.height});
$('.number-wrapper').css({'top': t, "left":l });
}
NumberInput.prototype.createHtml = function(arr){
var h = "";
arr.forEach(function(item){
h+="<li class='n-item'>"+item+"</li>";
})
return h ;
}
// 点击事件
NumberInput.prototype.itemClick = function( e ){
var e = e || window.event ;
e.stopPropagation();
var text = e.target.innerHTML;
var ele_val = $(this.ele).val();
if(text == "删除" ){
ele_val = ele_val.substr(0 , ele_val.length - 1);
$(this.ele).val( ele_val );
}else if( text == "确定"){
$(this.container).hide();
}else{
$(this.ele).val( ele_val + text );
}
}
// element元素点击显示
NumberInput.prototype.show = function(e){
var e = e || window.event ;
e.stopPropagation();
$(this.container).show();
}
NumberInput.prototype.hide = function(){
$(this.container).hide();
}
$.fn.numberInput = function (options, cb) {
var _this = $(this);
return new NumberInput(_this , options);
};
})(window , jQuery);
使用: 需提前引入jQuery
某个元素使用 $(’#ele’).numberInput();界面如下