Tang Anping

Love Java

JavaScript文本和文件节点操作

这几天的调试，总结了一些JavaScript的经验，如果大家有更好的方法，欢迎交流！
本人喜欢以代码的方式交流，不很喜欢纸上谈兵。
elementOper.jsp
<%@ page language="java" import="java.util.*" pageEncoding="GB2312"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>ElementOper</title>
    
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <script type="text/javascript">
        // 禁止文件上传文本框输入文字，然后弹出消息提醒，用得到元素节点，然后清空的方法不行，可以用下面的函数得到需要的效果
        function toolTip() {
            // 得到<span>跨字符节点
            var fileSpan = document.getElementById("fileSpan");
            // 重新给<span>赋值
            fileSpan.innerHTML = '<input name="fileUpload" title="请点击浏览"  type="file" value="aaaa" onkeyup="toolTip()">';
            // 弹出提醒信息
            alert("请点击后面的浏览，选择需要上传的文件！");
        }
        // 初始化文本
        function initialValue() {
            var txt = document.getElementById("username");
            // 设置字体颜色
            txt.style.color = "gray";
            // 给元素赋值
            txt.value = "--请在这里输入姓名--";
        }
        // 清空文本
        function clearText() {
            var txt = document.getElementById("username");
            txt.value = "";
            txt.style.color = "black";
        }
    </script>
  </head>
  
  <body onload="initialValue()">
    <form action="" name="fileForm" enctype="multipart/form-data">
        <span id="fileSpan"><input name="fileUpload" title="请点击浏览"  type="file" value="aaaa" onkeydown="toolTip()"></span>
    
        <table style="background-color: #D4E1EE;border-bottom-color: #cccccc" cellpadding="1"  cellspacing="0" border="0">
            <tr>
                <td style="border-color: gray;">
                    <input type="text" style="border: 0;border-color: gray;" name="username" onfocus="clearText()">
                </td>
            </tr>
        </table>
    </form>
  </body>
</html>

posted on 2006-12-05 09:10 Tang Anping 阅读(1003) 评论(0)  编辑  收藏 所属分类: JavaScript


只有注册用户登录后才能发表评论。
网站导航: