重置file input

Author : lovecicy

表单中经常有需要上传文件的表单项,但是这是一个比较特殊的表单控件,在各个浏览器中的呈现方式都不一样。在IE中,它的呈现方式是不可输入的输入框加按钮;在Chrome下,它的呈现方式是一个按钮加右边的文件名,如果没有文件被选中,则显示“No file chosen”。FF和IE8显示相同。 除了呈现方式不同之外,其特殊性也表现在其value属性上。因为安全性的问题,我们不能设置它的value值,甚至连读它的value值都不是我们想要的。在IE8下,读value值可以返回真实的文件路径;而在Chrome下则只能返回“C:\fakepath\”+文件名;FF下则只有文件名。 更加棘手的问题是,一旦选中了某个文件,怎么将表单项reset。在Chrome下最简单,直接再点按钮,选择cancel就可以reset了;在FF和IE8下就不行了。在Chrome和FF下,我们可以通过js将input的value设置为空来重置其值,但是在IE8下,value值无法通过js设置。 这样,当需要重置input的值的时候,就不能单纯的通过设置input的value来重置了。 如果可以的话,最简单的方法就是选择inp[Read More]

standard

捕捉IE下鼠标右键paste事件

Author : lovecicy

背景:IE8,jQuery 这次碰到的问题是,一个有边框的div套着一个起始宽度为30px的无边框文本输入框,随着用户的输入,输入框的长度也会随之改变。解决的办法是给输入框绑定事件,当用户输入事件触发时调用函数改变输入框的宽度。函数中判断输入框中内容是否和之前一样,如果一样则返回;不一样则改变宽度。 需要处理的情形:键盘输入,失去焦点,键盘粘贴,鼠标右键粘贴。 绑定的事件有:keyup,keydown,blur, update,change,input和paste。 这些事件能够基本保证在IE8,FF和Chrome下面对文本框宽度的控制。但是在IE8下,鼠标右键粘贴时会触发paste事件,但是在触发事件时输入框中内容还没有改变,所以函数会直接返回,不会改变输入框的宽度,之后输入框中的内容会被改变。但是在键盘粘贴时不会发生这种情况。 为了解决这个问题,我将绑定事件的回调函数改为一个function,在function中使用setTimeout调用改变输入框宽度的函数,延时为10ms,结果问题就解决了。 大致代码如下: $(‘#inputBox’).bind(‘paste’, functi[Read More]

standard

利用javascript替换iframe的内容

Author : lovecicy

最近碰到了一个iframe的问题,又是在IE8下。 情况是这样的,我需要在iframe中显示一封邮件的preview页面,这个页面需要前台把用户输入的邮件内容通过ajax传到后台,拿到后台生成的html文件以后,将返回的html写入到preview区域显示。因为用户输入的内容可能很长,所以没有办法使用get方法直接将拼接的url放到iframe的src属性下,只能使用post方法返回html内容再插入iframe中,iframe的宽高设为固定值。 本来使用的代码是这样的: $(window.frames[frameName].document).contents().find(‘html’).html(iframeHtml); 其中的iframeHtml是后台返回的一个完整的网页,包含<!DOCTYPE>,<head> 和<body>,执行完这段代码后,在chrome和firefox下都是正常的,但是在IE8下会有问题,要么preview区域什么内容都没有,要么就是内容太多的时候iframe的滚动条不会出现。但是在web de[Read More]

standard