sencha touch textarea 手机上不显示滚动条,且不能滚动

摘要:
最近,我在项目中发现senchatouch中的文本区域不显示滚动条或在手机上滚动。之所以可以在浏览器中显示滚动条,是因为浏览器为文本区域添加了滚动条。但是,手机中不会显示滚动条。在未来的版本中可能会有所改进。所以我必须找到另一条路。我发现一个由外国人重写的滑动文本区域(没有滚动条)。传输:Ext.define('LeslieTest.view.TextArea',{extend

最近在项目中发现 sencha touch 中的 textarea 在手机上不显示滚动条,也不能滚动。

在浏览器中之所以能显示滚动条滚动,那是浏览器为 textarea 添加的滚动条。 但在手机中是不会显示滚动条的。 可能在以后的版本中会有所改进吧。

于是只能另想办法了,找了一个老外重写的可滑动的 textarea (无滚动条)。

转:

Ext.define('LeslieTest.view.TextArea',
{
    extend : 'Ext.field.TextArea',
    xtype : 'scrollTextArea',
    
    initialize : function() {
        this.callParent();
        this.element.dom.addEventListener(
                Ext.feature.has.Touch ? 'touchstart'
                        : 'mousedown',
                this.handleTouchListener = Ext.bind(
                        this.handleTouch, this), false);
        this.element.dom.addEventListener(
                Ext.feature.has.Touch ? 'touchmove'
                        : 'mousemove',
                this.handleMoveListener = Ext.bind(
                        this.handleMove, this), false);
        this.moveListenersAttached = true;
    },
    
    destroy : function() {
        if (this.moveListenersAttached) {
            this.moveListenersAttached = false;
            this.element.dom.removeEventListener(
                    Ext.feature.has.Touch ? 'touchstart'
                            : 'mousedown',
                    this.handleTouchListener, false);
            this.element.dom.removeEventListener(
                    Ext.feature.has.Touch ? 'touchmove'
                            : 'mousemove',
                    this.handleMoveListener, false);
            this.handleTouchListener = this.handleMoveListener = null;
        }
        this.callParent();
    },
    
    handleTouch : function(e) {
        this.lastY = e.pageY;
    },
    
    handleMove : function(e) {
        var textArea = e.target;
        var top = textArea.scrollTop <= 0;
        var bottom = textArea.scrollTop + textArea.clientHeight >= textArea.scrollHeight;
        var up = e.pageY > this.lastY;
        var down = e.pageY < this.lastY;
        this.lastY = e.pageY;

        if ((top && up) || (bottom && down))
            e.preventDefault();

        if (!(top && bottom))
            e.stopPropagation();
    }
});

  

免责声明:文章转载自《sencha touch textarea 手机上不显示滚动条,且不能滚动》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇Lodop提示安装或升级的注意事项Boost学习之正则表达式regex下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

Element drawer添加 滚动条 无法上下滚动

/*1.显示滚动条:当内容超出容器的时候,可以拖动:*/ .el-drawer__body { overflow: auto; } /*2.隐藏滚动条,太丑了*/ .el-drawer__container ::-webkit-scrollbar{ display: none; }   ...

JS之滚动条效果2

在前面一篇说的是滚动条效果,本篇继续在前面的基础上面针对滚动条进行操作。本次要实现的效果如下:拖动滚动条左右移动时,上面的图片内容也相对外层盒子做相对移动。 下面针对要实现的效果进行分析:首先是页面基础结构,要实现内容的相对移动,里面的内容需要针对外层盒子相对定位,宽度应该大于外层盒子,而且外层盒子应该超出隐藏。下面是一个滚动条,由底层和滚动两部分组成。...

js实现html转pdf+html2canvas.js截图不全的问题

最近做项目中遇到要把整个页面保存为PDF文件,网上找了一下实现的方法都是 html2canvas.js+jsPdf.js 来实现。实现的过程是 先用html2canvas.js把html页面转成图片,再用jsPdf.js把图片导出为pdf。 于是做了个小案例来测试这个功能。 <body> <!-- PDF -->...

文本框点击后文字消失总结

1.文本框显示默认文字: <textarea>白鸽男孩</textarea> <textarea>白鸽男孩</textarea>    2.鼠标点击文本框,默认文字消失: <textarea onfocus=”if(value==’白鸽男孩’) {value=’ ‘}”>白鸽男孩</text...

Delphi 窗体函数 ShowScrollBar 控制滚动条

API函数 函数来源:FUNCTION ulong ShowScrollBar(ulong hwnd,ulong wBar,ulong bShow) LIBRARY "user32.dll" constant long SB_HORZ = 0constant long SB_VERT = 1constant long SB_BOTH = 3ShowScr...

Delphi下Webbrowser的使用技巧

1>调用网页中已知对象   src := WebBrowser1.OleObject.document.getElementByIdx(’id1′).src其实就是javascript中的 getElementByID 的函数 2>获得网页中的某个变量值 Html中的代码 : <script> var userID=123<...