标签归档:前端

HTML邮件设计注意点

由于查看邮件的客户端很多,如网页、outlook2003/2007/…、手机浏览器、第三方邮件APP。公司邮件主要涉及PC网页、outlook各个版本,因此考虑的更少。记录下遇到的问题:

  1. head中的style定义无效

    一般写网页,喜欢在head中定义css样式,可惜在此处失效。以网易邮箱PC网页版为例,网易邮箱会主动截取之间的代码作为邮件内容,如果在head中定义样式,将不被加载;QQ邮箱PC网页版则会全部加载;outlook2003表现正常,但2007同样不会解析。

  2. 布局使用table

    DIV除了块级的表现正常,其他则出现了异常,如float/position/width/margin:0 auto 等等。所以先使用table作为最大的父级,需要居中,可以是设定align=”center”。

  3. 使用内联样式

    CSS中子级会继承父级的样式,但outlook中表现奇怪,因此保险起见,为最小的子级定义内联样式。如<td style=”color:red”>警告</td>。

  4. line-height无法实现垂直居中

    设计的过程中,我参考了京东商城发送的电子邮件,表头使用的height+line-height来实现垂直居中,但outlook7中表现为底部对齐,可能原因是outlook2007的解析原理不一致,我们可以使用padding来撑高。在文字段落中line-height仍然是正常的。

  5. 各版本解析方式不一致

    参考文章①和②已列出来,简单而言就是outlook2007使用的是word引擎(HTML e-mails are now displayed by a word engine),想区别的,2003版本则是使用的是浏览器引擎,2012为深究。其他的PC网页版则肯定使用的浏览器引擎,微信也是使用的浏览器解析引擎。

  6. outlook转发会丢失样式

    HTML邮件在outlook中表现正常,但转发时会调用word编辑器,则会破坏了原来的样式,最明显的表现就是会在每个table结束时加个换行。目前还没找到具体的解决办法,如果有网易邮箱的“原件转发”功能,是否能解决呢?
    mail-wiht-html

  7. 尽可能不要使用图片

    由于outlook的安全设置,默认都是不显示图片的。如果使用到了,需指定宽度和高度,避免图片不显示是预留位置撑破页面。

  8. 统计邮件到达及阅读情况

    1. 阅后回复,这个需要阅读者点击确认回复;
    2. 在邮件底部隐藏一个图片,图片地址则是包含统计参数的URL,如京东的:

    <table style=”display:none;” width=”1″ height=”1″><tr><td><img width=”1″ height=”1″ src=”http://csc.jd.com/log.ashx?type1=edm&type2=stats1&data=A_1770035069%7C%7C%7Cwebmaster@webmaster.com%7C%7C%7C1400010897587″></td></tr></table>

    当然上一条已经决定了该方法存在失效的可能。
    3. 对邮件内的所有链接加入跳转,只要访问,就能通过跳转来记录,例如sendcloud的做法。缺点是,如果不访问就无法记录;特别需要注意部分邮件服务器(如QQ邮箱)会主动扫描链接(防毒),导致误标记;
    4. 尝试撤销邮件,如果已经阅读,会提示撤销失败;缺点是发件人和收件人必须是同一邮件服务器;

  9. 将发件人加入通讯录

    由于邮件标题一样,如果大量发送邮件,经常会被列入垃圾邮件,避免这种情况,可以考虑动态生成标题,并要求收件人将发件人加入通讯录。这里不得不吐槽godaddy,正常通知邮件和广告邮件的发件箱相同,导致正常的通知邮件也被列入广告邮件中。

  10. 将附件中图片插入的邮件内容中

    请阅读参考文章③

其它待补充。

参考文章:

  1. Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007
  2. Inxmail Guide HTML E-mails with Outlook 2007
  3. RFC 2111 – Content-ID and Message-ID Uniform Resource Locators (RFC2111)

Highcharts导出gb2312乱码问题

Highcharts是utf-8编码的,其本地的.net导出环境也是utf-8格式的,导致网页如果采用gb2312编码,显示正常,导出就乱码了。这种现象也同样经常出现在ajax的使用过程中。

ajax中一般的解决办法就是将中文等非英文的字符进行escape编码,再由后端模拟unescape解码,以避免编码的问题。跟着这个思路修改以解决Highcharts的导出乱码问题。同时为了配合后端简化,我使用了encodeURIComponent去编码。

由于需要在提交之前进行编码,那么我们需要修改Highcharts的导出文件的源码,你需要慎重考虑下。

1.前端

我们修改js/modules/exporting.src.js中的Highcharts.post方法:

	// add the data
	for (name in data) {
		createElement('input', {
			type: HIDDEN,
			name: name,
			value: encodeURIComponent(data[name])//here we add escape for all value
		}, null, form);
	}

修改上面的代码,在value的值前全部加上encodeURIComponent的编码方法。

2.后端

我们修改项目中的Exporter.cs,在class Exporter下增加下面的函数,并将接收的参数进行编码:

    /// <summary>
    /// Unescape for javascript escape. Return string;
    /// </summary>
    public static string UnEscape(string str)
    {
        return HttpUtility.UrlDecode(str);
    }

    //在Exporter中我们同样要修改如下
    //unescape all arguments
    string extension;
    fileName = UnEscape(fileName);
    this.ContentType = UnEscape(type).ToLower();
    this.Name = fileName;
    this.Svg = UnEscape(svg);

保存,生成,将生成的dll文件覆盖现在使用的,再次导出基本上可以解决乱码的问题。

其他说明

1.由于使用的是HttpUtility.UrlDecode()方法,如果你传递前没有encodeURIComponent,且编码就为utf-8,那么导出也是正常的;

2.没有经过大数据的测试,用于正式项目前建议您先测试下;

3.压缩包:http://pan.baidu.com/share/link?shareid=1309032918&uk=352812205

4.由于使用了编码,因此导出的文件名也是可以被指定为中文的;

5.导出文件的width必须被指定,否则导致导出出错,待修复。

压缩包中的版本已经修复的问题:

1.未选中项目导出时未被忽略,描述:http://www.cnblogs.com/youngerliu/p/3177252.html

2.网页为gb2312,导出时中文乱码问题。

highcharts的.net本地导出环境安装记录

由于项目中highcharts需要内网使用,需要本地搭建导出的环境。下面简述下步骤:

1.下载开源的.net导出文件:https://github.com/imclem/Highcharts-export-module-asp.net

2.新建虚拟站点,IIS下配置如图:(注意端口设定:80端口已经用了,就设定为8081;应用池的设定,仅支持framework3.5以上版本)

20130803162202

3.拷贝下载的压缩包中的Exporting_Demo_website文件夹下的文件到新站点的目录下。删除目录下的web.config文件,重命名web-dotNET4.0.config为web.config。(不需要Exporting_Demo_website这个文件夹,文件放在根目录下即可,否则后面的操作全部要加上这个路径)

4.打开站点http://localhost:8081/访问,内置一个Demo,选择导出,看是否正常。正常即完成。不正常就需要修正了。

访问Demo时出现500错误?

打开IIS管理器,选择“ISAPI和CGI限制”,里面找到我们上面设置的framework的版本,设定为允许。

关于未选中的数据线导出时依然显示的BUG

BUG描述及修复,请参见http://www.cnblogs.com/youngerliu/p/3177252.html

需要修改的地方是在Exporter.cs的CreateSvgDocument方法

private SvgDocument CreateSvgDocument()<br />    {<br />      SvgDocument svgDoc;<br /><br />      XmlDocument xml = new XmlDocument();<br />      xml.LoadXml(this.Svg);<br />      XmlNodeList nodeListAllg = xml.GetElementsByTagName("g");<br />      Dictionary&lt;int, XmlNode[,]&gt; dic = new Dictionary&lt;int, XmlNode[,]&gt;();<br />      int i = 0;<br />      foreach (XmlNode xNod in nodeListAllg)<br />      {<br />          i++;<br />          XmlNode xmlvisibility = xNod.Attributes.GetNamedItem("class");<br />          if (xmlvisibility != null &amp;&amp; xmlvisibility.Value == "highcharts-series-group")<br />          {<br />              foreach (XmlNode xNod2 in xNod.ChildNodes)<br />              {<br />                  i++;<br />                  XmlNode xmlvisibility1 = xNod2.Attributes.GetNamedItem("visibility");<br />                  if (xmlvisibility1 != null &amp;&amp; xmlvisibility1.Value == "hidden")<br />                  {<br />                      XmlNode[,] xmln = new XmlNode[1, 2];<br />                      xmln[0, 0] = xNod;<br />                      xmln[0, 1] = xNod2;<br />                      dic.Add(i, xmln);<br />                  }<br />              }<br />          }<br />          else if (xmlvisibility != null &amp;&amp; xmlvisibility.Value == "highcharts-tooltip")<br />          {<br />              XmlNode[,] xmln = new XmlNode[1, 2];<br />              xmln[0, 0] = xml.FirstChild;<br />              xmln[0, 1] = xNod;<br />              dic.Add(i, xmln);<br />          }<br />      }<br />      foreach (KeyValuePair&lt;int, XmlNode[,]&gt; a in dic)<br />      {<br />          a.Value[0, 0].RemoveChild(a.Value[0, 1]);<br />      }<br /><br />      this.Svg = xml.OuterXml;<br /><br />      // Create a MemoryStream from SVG string.<br />      using (MemoryStream streamSvg = new MemoryStream(<br />        Encoding.UTF8.GetBytes(this.Svg)))<br />      {<br />        // Create and return SvgDocument from stream.<br />        svgDoc = SvgDocument.Open(streamSvg);<br />      }<br /><br />      // Scale SVG document to requested width.<br />      svgDoc.Transforms = new SvgTransformCollection();<br />      float scalar = (float)this.Width / (float)svgDoc.Width;<br />      svgDoc.Transforms.Add(new SvgScale(scalar, scalar));<br />      svgDoc.Width = new SvgUnit(svgDoc.Width.Type, svgDoc.Width * scalar);<br />      svgDoc.Height = new SvgUnit(svgDoc.Height.Type, svgDoc.Height * scalar);<br /><br />      return svgDoc;<br />    }

注意:复制上面博客中的代码时,需要在项目中引入相关的文件,如图

20130803163428

这里我已经生成,没有环境的朋友可以直接到这里下载:http://pan.baidu.com/share/link?shareid=1300438122&uk=352812205(下载后直接把Bin目录下的4个文件覆盖掉项目Bin文件夹下的4个文件)

生成时出现“不是标准win32文件”

菜单栏—工具—导入与导出设置—重置所有设置—下一步。完成后重新生成,依然无效,只有重启电脑(我是重启电脑解决的)。

外部调用地址

在你的文档里面增加设定,width为必须项,否则报错

exporting: {<br />                url: 'http://localhost:8081/HighchartsExport.axd',<br />                filename: 'MyChartX',<br />                width: 1200//必选参数<br />            }

win2003 server配置时出现500错误

注意开启IIS的写权限,因为highcharts的导出代码可能较大,所以导出使用的是上传文件流的方式,具体可参考exporting.src.js源码。另外在正式服中配置时特别注意端口冲突及framework的版本问题(如果选择4.0以上版本,需要修改web.config,上面有提到),建议先找个win2003的测试服试试!

导出Pie图形时无数据的问题

此问题来自:http://www.cnblogs.com/wxmxiaoming/articles/3522468.htmljucelin没有验证,供参考。

080940233723150

解决方法:

从以下地址下载Svg.dll文件覆盖Bin目录下对应的文件即可(两个文件虽然版本一样,但是MD5值不一样);

http://svg.codeplex.com/

jquery触发两次onchange事件

因为项目中需要校验信息,又不想给服务器带来较大负荷,就使用onchange来实现校验。使用jquery绑定change事件,如下面的代码:


<script type="text/javascript">
        $(document).ready(function()
        {
            $('#test1').bind("change", function()
            {
                alert(this.value);
                this.value = this.value+"aa";
            });
        });

</script>
<input id="test1" type="text" />

演示地址:http://runjs.cn/detail/1r4wltof

测试环境

目前仅在IE8下发现此类问题,我仅测试了IE8/Chrome25/Firefox19

原因分析

google了下,有人将此问题归类为jqueryBUG,存在于1.4 – 1.6.4.版本,详见原帖内容
个人认为,在操作中js改变了input的内容,导致再次触发change事件。那么再次处罚了change事件后,内容也发生了改变,理论上应该进入死循环,但实际上只触发了2次。另外我也尝试了直接给input添加onchange属性来触发,开始时,也是触发了2次,但不知道改变了什么,后来仅触发了1次。

解决方法

我尝试了先解绑,再绑定的方法。注,#test1的方法是正确的,#test2的方法则是没实现的,作对比。setTimeout的方法来自这里.

$(document).ready(function(){
	$('#test1').bind("change", function(){
		var thatFun=arguments.callee;
		var that=this;

		$(this).unbind("change",thatFun);

		//you can do something here
		alert(this.value);
		this.value=this.value+"aa";

		//rebind again
		setTimeout(function(){$(that).bind("change",thatFun)},0);//why use setTimeout? sorry, I don't know...
	});

	//without setTimeout, it will not work. just like this.
	$('#test2').bind("change", function(){
		$(this).unbind("change",arguments.callee);
		alert(this.value);
		this.value=this.value+"aa";
		$(this).bind("change",arguments.callee);
	});
});

onpropertychange功能的兼容

IE的onpropertychange十分的好用,可惜的是只兼容IE,非IE就悲剧了。还好现在HTML5中的oninput已经兼容了这个功能。下面写了个测试页面,大家可以试试。

Demo:lab/onpropertychange/onpropertychange.html

看到这里,你需要知道onpropertychange的作用,还有onchange/onkeyup/onkeydown/onkeypress这几个属性的不同作用。

另外,前辈们已经写了个JS来完美支持这个特性,在Demo中也加入了进去,代码看下面


function immediately(){
	var element = document.getElementById("mytext");
	if("\v"=="v"){//判断IE
		element.onpropertychange = webChange;
	}else{//非IE
		element.addEventListener("input",webChange,false);
	}
	function webChange(){
		if(element.value){document.getElementById("test").innerHTML = element.value};
	}
}

使用建议

如果是只开发移动项目,只用oninput就OK了,如果是非移动项目,用onpropertychange+oninput基本就OK,我使用这2个方法测试了Chrome15、Opear12、IE6、IE7、IE8,均兼容,对于低版本的Chrome和Opear未测试。如果你的浏览器和我测试的不同,欢迎测试并反馈给我,万分感谢。

其他资源:

《js监听输入框值的即时变化》

《哥俩好:oninput & onpropertychange》

《A HTML5 Browser maze, oninput support》

CSS制作小箭头

在西门大哥的博客中看到一篇文章:CSS实用小技巧,利用border属性实现一个标签做箭头,西门使用的是border,这里jucelin介绍另一种方法,用到的是一个特殊字符:◆。

演示DEMO

代码:请狂击DEMO,然后右键,查看源代码(写得应该还算规范)。

主要用途:制作tips等。

实现原理:方法很简单,特殊字符◆就已经有了箭头的效果,那么用2个◆,用相对或绝对定位将他们完全重合,如果想做成向上的箭头,则再将下一层的◆向上移动1px。设置下颜色:下一层的使用的是下面内容部分的边框色,而上一层的◆使用的是内容部分的背景色,这样就出现一个想要的样式。

兼容性:用的position定位,兼容性你懂的(DEMO中未测试,用于生产需自测)。

比较下

西门大哥的方法并不好实现border同一色的问题,当然如果使用上面的方法也是可以实现的。

最后说明

如果一个页面中用了很多tips箭头,我仍然建议使用图片,减少浏览器的渲染时间,当然似乎要很多很多,才能看出浏览器有卡的效果。

相关资源

另一种实现小箭头的方法:CSS实用小技巧,利用border属性实现一个标签做箭头

WP修改自带jquery加载方式

调用自带jquery方法

<?php wp_enqueue_script("jquery"); ?>

但要注意的是: wp_enqueue_script(“jquery”); 务必加在 wp_head(); 的前面。

同时,需要注意的是wordpress自带的jquery和官方的jquery是有区别的,自带的jquery则需要这样使用:

jQuery(document).ready(function($) {
// "$"符号在这里才能被识别
});

WP 的 jQuery 和原版唯一的不同, 就是在最后一行加了 jQuery.noConflict();这个noConflict() 就是为了与其它的library 兼容性, 如:Prototype, MooTools, 或 YUI。

调用其他jquery方式

1.最直接的:

<script type=”text/javascript” src=”<?php bloginfo(‘template_url’); ?>/js/jquery.js”></script>

2.调用谷歌 Google 的 API库:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
//最好再加上以下代码,一边在连接google的API库是失效时调用本地的jQuery文件:
<script>
!window.jQuery && document.write('<script src="jquery-1.6.1.min.js"><\/script>');
</script>

取消使用自带jquery

网上最多的方法是在/wp-includes/script-loader.php的119行,将

$scripts->add( 'jquery', '/wp-includes/js/jquery/jquery.js', false, '1.7.1' );

//修改为

if(is_admin()){
 $scripts->add( 'jquery', '/wp-includes/js/jquery/jquery.js', false, '1.7.1' );
}

这个方法不支持wp升级,因为升级后会将这个文件修改回来。另外jucelin想到的最简单的方法就是,将官方的jquery替换自带的jquery文件(这个方法会导致后台无法使用自带jQuery!)当然这也应该不支持wp的升级,升级后会被新的jquery覆盖掉。

参考来源:

1.在WordPress调用jQuery的方法及注意事项

2.去掉wordpress自带的jquery 及 附属信息

奇怪的浮动Float

在百度知道搜资料的时候看到一个网友问了关于CSS浮动的问题,问题地址在这里,直接看代码:

<body>
<div style="background:red; height:100px; width:200px; float:left;">111111111111111</div>
<div style="background:grey; height:100px; width:200px;">222222222222222</div>
</body>

看了上面代码很简单,相信从理论上你也应该看出会是什么样的一个显示方式。但问题就在于你没想到的地方。看下面的效果:

111111111111111
222222222222222

再试试不同的浏览器,我使用的IE和Chrome,可以明显的看出两者的不同之处。为了更明显的看出区别在哪,你可以本地新建一个文档,贴入下面的代码:

<body>
<div style="background:red; height:100px; width:200px; float:right;">111111111111111</div>
<div style="background:grey; height:100px; width:200px;">222222222222222</div>
</body>

然后收到缩小浏览器窗口的宽度,看看两者是怎么个float方式。

之前也没遇见过,当然也可以为第二个div加个float就能解决,但问题在于我没想清楚这样的不兼容到底怎么去解释。不过从理论上IE的渲染结果比较符合我的理解,Chrome的结果有点让我出乎意料。

请问各位高手,如此问题你如何解释?

js实现选中文字分享到腾讯新浪微博

参考来源:《js页面文字选中后分享到新浪微博实现》

补充信息:腾讯微博视觉素材 / 腾讯微博分享接口

主要思路:在zxx的demo中添加上分享到腾讯微博的功能,并且把选定文字限制在正文范围内,以太平洋电脑网文章页为例

实现过程中遇到问题:IE下腾讯微博分享的url中含有中文会引起实际分享内容乱码

解决方案:选中部分和url的中文部分使用encodeURIComponent()方法

实际效果如图:

演示地址:演示地址

核心方法:

var eleImgShare = document.getElementById("imgSinaShare");  //新浪微博图标
var eleImgShare2 = document.getElementById("imgQqShare");  //腾讯微博图标
var artMain = document.getElementById("artMain");  //限定在的id容器
 
var $miniBlogShare = function(eleShare,eleShare2,eleContainer) {  //实现方法
	var eleTitle = document.getElementsByTagName("title")[0];
	eleContainer = eleContainer || document;
	var funGetSelectTxt = function() {  //获取选中文字
		var txt = "";
		if(document.selection) {
			txt = document.selection.createRange().text;	// IE
		} else {
			txt = document.getSelection();
		}
		return txt.toString();
	};
	eleContainer.onmouseup = function(e) {  //限定容器若有文字被选中
		e = e || window.event;
		var txt = funGetSelectTxt(), sh = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
		var left = (e.clientX - 40 < 0) ? e.clientX + 20 : e.clientX - 40, top = (e.clientY - 40 < 0) ? e.clientY + sh + 20 : e.clientY + sh - 40;
		if (txt) {
			eleShare.style.display = "inline";
			eleShare.style.left = left + "px";
			eleShare.style.top = top + "px";
			eleShare2.style.display = "inline";
			eleShare2.style.left = left + 30 + "px";
			eleShare2.style.top = top + "px";
		} else {
			eleShare.style.display = "none";
			eleShare2.style.display = "none";
		}
	};
	eleShare.onclick = function() {  //点击新浪微博图标
		var txt = funGetSelectTxt(), title = (eleTitle && eleTitle.innerHTML)? eleTitle.innerHTML : "未命名页面";
		if (txt) {
			window.open('http://v.t.sina.com.cn/share/share.php?title=' + txt + '→来自页面"' + title + '"的文字片段&url=' + window.location.href);	
		}
	};
	eleShare2.onclick = function() {  //点击腾讯微博图标
		var txt = funGetSelectTxt(), title = (eleTitle && eleTitle.innerHTML)? eleTitle.innerHTML : "未命名页面";
		if (txt) {
			window.open( 'http://v.t.qq.com/share/share.php?appkey=93807795cd1948718beee8c9677a864a&title=' + encodeURIComponent(txt + '→来自页面"' + title + '"的文字片段&url=' + window.location.href));	
		}
	};
}(eleImgShare,eleImgShare2,artMain);

大家在使用分享时可以先申请一个来源字段,这样以来,在从本站分享出去的微博都会在微博的来源中显示转自哪,如此可带来回访流量。以腾讯微博为例,在http://open.t.qq.com/中登录,选择网站主,再进入选择一键转播,填写资料,此时会显示出代码,在代码中找到【var _appkey = “801118079” || “801000271”; //你从腾讯微博开放平台获得的appkey】第一个数字串就是appkey,更换上面代码中appkey=后面的值(jucelin使用的是旧版的应用的appkey,所以比较长),同时上面会提示需要提交审核,来源字段才能生效,提交吧。通过后就OK了。腾讯通过率高,新浪的似乎比较严格。

来源字段相关说明:链接很长,点这里就行

原文转自:http://www.ryanbay.com/?p=198

jquery.bgiframe使用方法

jquery.bgiframe是用来处理IE6下select的z-index最高无法被透明层遮罩的BUG,原理也是利用IE6下的BUG,iframe可以遮罩住select,而DIV可以遮罩iframe,这样DIV也就遮罩住了select。

网上转载这个插件的文章很多,但大多都是复制过来的,来基本的错别字都没有修改。jucelin看到这个插件时就下载到了JS代码,但不知道初始化时对谁操作,于是网络中找了一会,很是失望的是,没有找到,也许是我找到的太匆忙。最后还是下载的官方包(在明河的博客上下载的),演示有,但代码中连jQuery地址错了,八成不是官方的演示代码。

OK,不发牢骚了。

插件官网及介绍原地址  https://github.com/brandonaaron/bgiframe

下载地址太长,点这里  ||  网盘下载 (都为2.1.3-pre版本)

官方演示http://sandbox.runjs.cn/show/dooztchz(下载地址中的test.html)

使用方法:

<!--[if lte IE 6]>

<script type="text/javascript" src="Js/jquery.bgiframe.min.js"></script>

<script language="javascript">

$(document).ready(function(){

$("#bg").bgiframe();//#bg是遮罩层,即设置半透明的那个DIV,其他都没用

});

</script>

<![endif]-->

使用后

jucelin在使用后,因为设置position的问题,导致遮罩层打开后select不可见,关闭时可见,这个也没去深究。另外,有网友说此插件也有BUG,详情可看这里:bgiframe的bug

2012.8.22更新

看很多朋友都有在搜索这个插件,我给下我最后的解决方法,方法很简单,在有遮罩层打开的时候将后面的select的visibility设置为hidden,关闭时可见,一般而言,我们可以专门设置IE6下的JS来设置。因为我没有使用这个插件,所以没有深入探究上面的BUG。

如果你有好的方法也可以留言。

2012.11.29更新

将官方的演示文档放在了runjs.cn上,供大家直接测试使用。演示地址:http://sandbox.runjs.cn/show/dooztchz,源码地址:http://runjs.cn/code/dooztchz

推荐一个在线JS压缩加密的工具

以前一直在使用雅虎的YUICompressor压缩,本地,速度快,压缩后的代码基本上都是成功的,不足的地方就是需要先安装java环境,在安装YUICompressor,否则使用不了。想我这种不喜欢系统慢的人,重装系统是经常的事,每次都得配置环境,累,还拖累系统。

使用在线工具,便成了理所当然的事了。使用过百度应用里面的几个压缩工具,压缩或基本都会调试失败,这点可能是应用的算法存在不同的问题,这里推荐一个在线JS压缩加密的工具。

传送地址:http://www.jb51.net/tools/packer.htm

官方网站:http://dean.edwards.name/packer/

下载地址:http://dean.edwards.name/download/#packer

jucelin这边的压缩现在基本上都是用jb51的packer,原因是jb51在我这边方式速度快,哈哈。其他的关于css的压缩,百度应用里面的应用基本上都能满足。这里特别提示下,在压缩之前需要对代码进行检查,如是否缺少分号(;),基本上只要缺少1个,压缩后的代码就会出错,更可恨的是,这是往往不能被发现的。

使用JS和正则表达式限制输入

为了保证数据的有效性,防止用户输入的不是“理想”的内容,对输入框进行限制,应该算是客户端首先判断的内容,提交后再有服务器端验证。下面是找到的一些常用的使用正则表达式进行限制的代码,供参考。需要客户端支持JS

正则表达式限制只能输入中文:(双击代码复制)

onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\u4E00-\u9FA5]/g,''))"

正则表达式限制只能输入全角字符:(双击代码复制)

onkeyup="value=value.replace(/[^\uFF00-\uFFFF]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\uFF00-\uFFFF]/g,''))"

用正则表达式限制只能输入数字:(双击代码复制)

onkeyup="value=value.replace(/[^\d]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"

用正则表达式限制只能输入数字和英文:(双击代码复制)

onkeyup="value=value.replace(/[\W]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"

上面是客户端的判断,在服务器端依然可以是用正则表达式进行数据验证,切记,一定需要双重验证。

演示:(只能输入数字和英文)