IE事件动态预览输入框内容 - 郑星阳 - ITeye博客

`

zccst

浏览: 3319442 次
性别:
来自: 北京

最近访客更多访客>>

consy

snowstorm

净瞎扯

离氺的鱼

博主相关

博客

微博

相册

收藏

留言

关于我

文章分类

社区版块

存档分类

最新评论

yzq21056563：感谢作者分享~请教下，http://www.lisa33xia ...
CSS基础：text-overflow:ellipsis溢出文本
u012206458：
$.ajax的error,complete,success方法
DEMONU：谢谢，虽然不能给你赞助，但是要给你顶
mysql中key 、primary key 、unique key 与index区别
njupt_tolmes：阿凡达阿凡达阿凡达阿凡达阿凡达阿凡达阿凡达阿凡达阿凡达阿滕庆亚 ...
CSS基础：text-overflow:ellipsis溢出文本
zenmshuo：用过SpreadJS，也包含数据可视化的图表
推荐几个web中常用js图表插件

IE事件动态预览输入框内容

博客分类：

浏览器兼容性

JavaScript 浏览器 ie

阅读更多

作者：zccst

这种解决办法已在IE7，8，9下单独测试成功。
但是放在项目里还有错。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>测试标题</title>

<style type="text/css">

</style>
<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">
$(function(){
	console.log($("#out").find("input.a,input.b"));
	$("#out").on("input","input", handler);
	if($.browser.msie){
		$("#out").find("input")[0].attachEvent("onpropertychange",handler);
	}
	function handler(e){
		//console.log($(e.currentTarget)[0]);
		//$(e.currentTarget)[0].propertychange = preveiw;
		$("#preview").html($("input[name=url1]").val());
	}
	function preveiw(){
		$("#preview").html($("input[name=url1]").val());
	}
});
</script>

</head>
<body>
预览：<div id="preview"></div>
<div id="out">
	<input type="text" id="url1" class="a" name="url1" value="" />
	<input type="text" id="url2" class="b" name="url2" value="" />
</div>

</body>
</html>

如果您觉得本文的内容对您的学习有所帮助，您可以微信：

分享到：

2014年7-12月犯的几个小错误 | 雷军的博客

2014-07-17 19:34
浏览 1323
评论(0)
分类:Web前端
查看更多

评论

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

自定义弹出对话框/输入框(完美支持IE等浏览器): 自定义弹出对话框/输入框(完美支持IE等浏览器)，自定义弹出对话框/输入框(完美支持IE等浏览器)，自定义弹出对话框/输入框(完美支持IE等浏览器)

使用js代码来控制IE中的打印预览效果: - `pagesetup_null`函数通过修改IE的注册表设置来清空页眉和页脚，这在打印预览之前非常有用，可以确保打印内容中不会出现不必要的信息。 - `pagesetup_default`函数则是将页眉页脚恢复为默认值，通常在打印完成后...

jQuery上传图片预览，简洁版，可兼容IE和FIREFOX: 本文将深入探讨如何使用jQuery实现一个简洁版的图片上传预览功能，这个功能可以兼容包括IE和Firefox在内的多种浏览器。首先，我们需要理解图片预览的基本原理。在用户选择文件之前，我们无法直接预览图片。但是，...

jsp 文件上传浏览，支持ie6，ie7，ie8.docx: 这部分代码展示了如何构建一个包含文件输入框和预览区域的简单表单。其中`enctype="multipart/form-data"`属性是必须的，用于确保表单数据能够正确地传输到服务器。 #### 四、总结通过上述分析，我们可以看出文档...

js上传前预览图片，兼容IE,firefox,google: 2. **事件处理**：在用户选择文件后，我们需要监听`change`事件，当文件输入框的`files`属性发生变化时触发。通过`event.target.files`可以获取到用户选择的文件列表。 3. **跨浏览器兼容性**：对于不支持File API...

文档对象模型中文手册预览版 (IE5.0+): 在“文档对象模型中文手册预览版 (IE5.0+)”中，我们可以预期找到关于如何使用DOM在Internet Explorer 5.0及更高版本中进行交互的详细信息。这可能包括以下几个关键知识点： 1. **DOM结构**：DOM将HTML或XML文档...

IE7不能立即显示上传的图片: 在这个例子中，`onchange`事件被用来触发`PreviewImg1`函数，该函数负责处理图片预览的逻辑。 ##### JavaScript代码实现接下来，我们来看一下如何编写`PreviewImg1`函数。此函数的主要作用是从文件输入框中获取...

多图片预览js: 当用户在文件输入框中选择文件后，该事件会被触发。我们可以在JavaScript中这样设置： ```javascript document.getElementById('imageInput').addEventListener('change', handleFileSelect); ``` 这里的`...

jquery上传图片预览插件: 5. **事件绑定**：使用jQuery的事件处理函数，如`on('change')`监听文件输入框的变化，当用户选择新文件时触发预览。 6. **动画效果**：jQuery提供了丰富的动画效果，可以用于图片加载时的过渡展示，增加用户体验。...

js上传图片预览: - 当`<input type="file">`元素发生`change`事件时，调用`previewImage`函数进行图片预览。 5. **兼容性处理：** 为了确保代码在不同浏览器中的兼容性，本例提供了两种实现方式： - **对于现代浏览器**：使用...

jsp图片上传及预览: 这部分HTML代码定义了表单结构，其中包含了一个文本输入框用于输入商店名称，一个文件输入框用于选择图片文件，并且绑定了`onChange`事件触发`PreviewImage`函数进行预览。 #### 四、总结本文详细介绍了基于JSP...

ie上可以显示的选色板: 只需简单地引入jscolor.js文件，并应用到特定的文本输入框，就可以在IE以及其他浏览器中实现颜色选择功能。例如： ```html <!DOCTYPE html> <title>IE颜色选择器 <script src="jscolor/jscolor.min.js"></...

浏览器事件大全.txt: ### 浏览器事件大全知识点解析 ...以上是浏览器事件大全中的主要内容，通过这些事件可以更好地控制网页的行为和交互体验。开发者可以根据具体需求选择合适的事件进行编程实现，提高网站的用户体验。

上传图片预览: 通过监听文件输入框的`change`事件，可以获取到用户选择的文件对象，进而读取文件内容并展示为预览图。 ##### 2.2 实现步骤 1. **HTML结构定义**：首先，需要定义一个文件输入框和一个用于显示预览图的元素。 ```...

jQuery评论插件IE8.rar: 1. **评论输入与提交**：用户可以通过输入框提交评论，利用jQuery监听提交事件，验证评论内容，并通过Ajax无刷新方式发送到服务器。 2. **评论显示**：评论数据从服务器返回后，使用jQuery动态地将评论添加到页面上...

在页面预览客户端本地图片的js代码(兼容FF IE): 在网页开发中，经常会遇到需要在页面上预览本地图片的需求，但是出于安全原因，主流浏览器如IE（Internet Explorer）并不允许直接通过img元素的src属性引用本地文件系统中的图片路径。这是因为直接通过网页代码访问...

js图片预览: 在这个示例中，当用户选择一个文件后，会触发`onChange`事件，调用`PreviewImage`函数进行图片预览。此外，还设置了预览区域的样式，使其能够正确显示图片。 #### 三、总结通过上述代码和示例可以看出，利用...

input按钮onclick事件大全: ### Input按钮Onclick事件详解在Web开发中，`<input>`标签是HTML文档中最常用的元素之一，常用于创建各种...然而，需要注意的是，部分事件可能仅在特定浏览器（如IE）中有效，因此在实际应用时还需考虑兼容性问题。

直接生成预览图的js源码: 1. **图片预览**：当用户通过文件输入框（`<input type="file">`）选择一张图片时，可以即时在页面上预览所选图片。 2. **格式验证**：对用户上传的图片格式进行验证，确保只允许特定格式的图片上传。 3. **跨浏览器...

H5_JS调用摄像头_预览_拍照_兼容谷歌.rar: 在现代Web开发中，H5（HTML5）已经成为构建交互式和动态网页的重要工具，而JavaScript作为其核心脚本语言，使得开发者能够实现更多高级功能。在这个“H5_JS调用摄像头_预览_拍照_兼容谷歌.rar”压缩包中，包含了一个...

Global site tag (gtag.js) - Google Analytics