iview page分页添加跳转按钮-输入页码后点击跳转

iview page分页添加跳转按钮-输入页码后点击跳转_第1张图片

在iview里,分页组件的电梯功能输入页码后需要按回车才能跳转

这让不知道需要按回车的人摸不着头脑呀,所以呢,动动手写个跳转按钮~

效果如图:


[1]首先是div

[2]然后是让它模拟点击

//点击跳转到输入的页码
   goElevatorPage(){
   	var evtObj;
   	var thisPage=document.getElementById(this.pageId);
   	var elevatorDiv=thisPage.getElementsByClassName("ivu-page-options-elevator");
   	if(elevatorDiv && elevatorDiv.length>0){
   	    var pageInput = elevatorDiv[0].getElementsByTagName("input")[0];
       	    if (window.KeyEvent) {//firefox 浏览器下模拟事件
                evtObj = document.createEvent('KeyEvents');
                evtObj.initKeyEvent("keyup", true, true, window, true, false, false, false, 13, 0);
            } else {//chrome 浏览器下模拟事件
                evtObj = document.createEvent('UIEvents');
                evtObj.initUIEvent("keyup", true, true, window, 1);
                delete evtObj.keyCode;
                if (typeof evtObj.keyCode === "undefined") {//为了模拟keycode
                    Object.defineProperty(evtObj, "keyCode", { value: 13 });                       
                } else {
                    evtObj.key = String.fromCharCode(13);
                }
            }
            pageInput.dispatchEvent(evtObj);
   	}
   }
模拟键盘按下,参考:https://www.cnblogs.com/gisblogs/p/5821665.html

你可能感兴趣的:(iview page分页添加跳转按钮-输入页码后点击跳转)