小编Vid*_*dhi的帖子

在ipad的情况下使图像定位在文本框上可以点击(为iOS创建HTML5搜索输入类型)

我正在尝试input type='search'使用javascript 模拟HTML5 .我的目标是做这样的事情:

在此输入图像描述

首先,我将指出为什么我没有直接使用HTML5搜索输入类型.在iPad的情况下,提到的输入类型显示圆角文本框和本机搜索输入框所需的所有其他功能看起来与iOS相似,但当用户键入某些文本时,文本框一角的小十字(x)图标除外进入搜索框.

我尝试了所有方法 - 将输入类型搜索放入a <form>,重新定位type='search'等等.似乎没有带来所需的效果(仅当应用程序部署在ipad上时 - webview或移动浏览器).

因此,我使用十字图标模拟窗口小部件,并根据搜索框内的内容有选择地显示/隐藏它.它适用于所有版本desktop Safari(通过开发人员工具切换).但是,当我在iPad上尝试时,在搜索框内键入会根据需要显示交叉图标,但不允许在其上注册触摸事件.我也知道这个的原因,因为当用户键入时屏幕键盘处于活动状态时,搜索文本框上会阻止下一个触摸事件.因此,还可以防止触摸十字图标.

我的代码如下:

HTML看起来像这样:

<form id="searchForm">
    <div>
        <input type="search" id="searchBox">
        <a id="cross_icon" >
            <img src="search.png">
        </a>
    </div>
</form>

Run Code Online (Sandbox Code Playgroud)

jquery代码如下所示:

//This function will be triggered on keyup event on searchBox
showXIcon : function(){
                var search = $('#searchBox').val();
                if(search.replace(/\s/g, "") === "") {
                   $('#cross_icon').hide();
                } else {
                   $('#cross_icon').show();
                }


            },
//this function will be called on click on cross_icon
clearSearchBox: function(){
            $('#searchBox').val('');
            $('#cross_icon').hide();
        }, …

Run Code Online (Sandbox Code Playgroud)

jquery html5 ipad ios

Vid*_*dhi

2013 05-08

8
推荐指数

1
解决办法

1583
查看次数

使用javascript将自动生成的HTML中的字体大小从px更改为em

我有一个HTML我无法控制的Web服务生成的.该HTML中有字体大小px和pt.我的要求是将所有字体大小更改为em.

这是我试过的:

我尝试<font>使用以下方法访问所有标签:

document.getElementByTagName('font').style.fontSize;

Run Code Online (Sandbox Code Playgroud)

但是,null即使我有很多字体标签,它也会返回HTML.

我读到的所有相关来源都假设我们已经控制CSS或HTML因此不适用于我的问题.

简而言之,我想解析HTML并找到所有内联样式(font-size)并从任何其他类型更改为em.

html css em font-size

Vid*_*dhi

2013 01-30

6
推荐指数

1
解决办法

538
查看次数

MouseUp和DoubleClick都使用Backbone js附加到单独的事件处理函数

我有一个图表应用程序,其中我使用Backbone.js为图表图像的不同"区域"上的鼠标和双击事件附加单独的处理程序.

我需要使用mouseup来检测用户是否在图表图像的"区域"部分单击了左键或右键,这取决于我是否重定向流程.此外,我需要双击放大或最小化包含图表图像的面板.

这是问题..由于每次双击都隐式调用mouseup,我的最大化/最小化功能会干扰左/右按钮单击功能.

我尝试使用各种技术,如超时检查是否单击鼠标后跟双击(如下面的线程所示: 当检测到双击事件时需要取消单击/鼠标事件

它对我不起作用.此外,我有不同的视图对象包含同一页面上的图表,所以我附加了每个事件处理程序的唯一ID来区分它们我还尝试了简单的标志设置重置方法来检测双击并防止鼠标,如果双击发生,但从事件层次结构鼠标在双击之前发生,也失败了.

总而言之,请帮忙!提前致谢

jquery double-click event-handling backbone.js mouseup

Vid*_*dhi

2017 05-23

6
推荐指数

1
解决办法

3640
查看次数

编辑后保存捕获的屏幕截图

我想在我的应用程序中实现一个功能,其中用户可以拍摄当前屏幕的快照并可以对其进行注释(修改/涂鸦/等),之后,可以通过电子邮件发送它.我的应用程序使用phonegap for ios以及android支持.但主要是由javascript/jquery组成.

到目前为止,我能够实现:

将当前html保存到画布(借助html2canvas库)
允许用户使用sketch.js提供的徒手工具与该画布进行交互
在画布的任何位置向用户定义的位置添加文本注释
使用phonegap的电子邮件Composer Plugin打开一个新的电子邮件弹出窗口

为了向用户提供交互感,我实现了画布层:

1:第一层将显示通过html2canvas捕获的实际快照.要在此画布上显示我的快照(capturedCanvas),我将画布的背景图像设置为通过库获取的图像.代码如下:

 $('.myClass').html2canvas({

                onrendered: function( canvas ) {

                    var capturedCanvas = document.getElementById('capturedImageView');
                    capturedCanvas.style.backgroundImage = 'url('+canvas.toDataURL();+')';

                }
        });

Run Code Online (Sandbox Code Playgroud)

2和3:它上面的图层将根据用户是选择徒手工具还是文本工具进行切换.

一切正常,但当用户完成与单独画布的交互时,我需要将3幅画布放入一张图片中,以便将其附加到电子邮件中.我能够连接第2层和第3层,context.drawImage但不知怎的,我从html2canvas获得的实际快照并没有伴随我的最终图像.

我的最终快照如下所示:

请提供有关此问题的见解.

javascript html5 canvas snapshot

Vid*_*dhi

2013 06-19

6
推荐指数

1
解决办法

295
查看次数

在浏览器的视口中有选择地切换<DIV>

我正在写一个HTML5应用程序iOS.在阅读完这篇文章后,我想通过保留一些HTML节点DOM但不保留它们来进行一些性能优化viewport.

出于演示目的,我一直在使用以下代码(我的实际工作场景将会有更多<div>)

<!DOCTYPE HTML>
<html>
<head>
<script>
    function func(){
        var div1 = document.getElementById('div1');
        var div2 = document.getElementById('div2');
        div1.style.cssFloat = "";
        div1.style.visibility = "hidden";
        div1.style.left = "-100%";

        div2.style.left = "100%";
        div2.style.visibility = "";
        div2.style.cssFloat = "left";
    }

    function func1(){
        var div1 = document.getElementById('div1');
        var div2 = document.getElementById('div2');
        div2.style.cssFloat = "";
        div2.style.visibility = "hidden";
        div2.style.left = "-100%";

        div1.style.left = "100%";
        div1.style.visibility = "";
        div1.style.cssFloat = "left";
    }
</script>
</head> 
<body …

Run Code Online (Sandbox Code Playgroud)

css html5 viewport ios

Vid*_*dhi

lucky-day

5
推荐指数

1
解决办法

215
查看次数