表单有交点时文字变淡效果

实现的效果如淘宝首页搜索框所示。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
    <title>请输入关键字查询</title>
    <style type="text/css">
        .default {
            position: absolute;
            top: 10px;
            left: 3px;
            padding: 0 8px;
            z-index: 1;
            color: #8B9096;
            cursor: text;
            font-size:14px;
        }
    </style>
</head>
<body>

<label class="default" id="default" for="txt1">请输入关键字查询</label>
<input type="text" name="" id="txt1" class="txt" value=""/>

<script type="text/javascript">
    var oTxt = document.getElementById(‘txt1‘);
    var oDefault = document.getElementById(‘default‘);
    var sOld = oDefault.innerHTML;
    oTxt.onfocus = function () {
        oDefault.style.color = ‘#ccc‘;
    }
    oTxt.onblur = function () {
        oDefault.style.color = ‘#8B9096‘;
    }
    oTxt.onpropertychange = oTxt.oninput = function () {
        if (oTxt.value.length > 0) {
            oDefault.innerHTML = ‘‘;
        } else {
            oDefault.innerHTML = sOld;

        }
    };

</script>
</body>
</html>

时间： 2024-12-16 18:44:58

表单有交点时文字变淡效果的相关文章

chrome浏览器当表单自动填充时，怎么去除浏览器自动添加的默认样式。

参考blog来自 http://segmentfault.com/q/1010000000671971 chrome浏览器当表单自动填充时,怎么去除浏览器自动添加的默认样式. 一.发现该问题的原因-是在写账号登录页面时,input表单添加了背景图片,当自动填充,搓搓的一坨淡黄色背景出来. 这个原因是我草率的直接设置在input元素里面,结果问题就来了.所以如果把这个图标放在input表单外面,就不会出现这个问题. 二.表单自动填充会添加浏览器默认样式怎么处理和避免第二张图,就是表单自动填充后,

#-webkit-autofill##google#启用表单自动填充时，如何覆盖黄色背景

#-webkit-autofill##google#启用表单自动填充时,如何覆盖黄色背景 google和opera浏览器的表单自动填充后,输入框均会变成黄色背景,黑色字体.如下图. 这样的话会与网页的整体设计风格不一致,怎样自定义样式,来覆盖黄色背景. 首先来看看是什么导致的,右键查看元素样式: input:-webkit-autofill,textarea:-webkit-autofill, select:-webkit-autofill{ rgb(250, 255, 189); backgr

Dojo学习笔记（十三）：Dojo表单控件——TextBox及其变体

dijit/form/TextBox :一个基本的文本框 dijit/form/SimpleTextarea :大量文字输入,一个基本的textarea dijit/form/Textarea :一个扩展dijit/form/SimpleTextarea动态增加或减少其高度 dijit/form/NumberTextBox或dijit/form/NumberSpinner:输入是数字,确保输入一个文本框,dijit/form/NumberSpinner提供扩展dijit/form/NumberT

#-webkit-autofill##google#启用表单自动填充时，如果覆盖黄色背景

google和opera浏览器的表单自动填充后,输入框均会变成黄色背景,黑色字体.如下图. 这样的话会与网页的整体设计风格不一致,怎样自定义样式,来覆盖黄色背景. 首先来看看是什么导致的,右键查看元素样式: input:-webkit-autofill,textarea:-webkit-autofill, select:-webkit-autofill{ background-color: rgb(250, 255, 189); background-image: none; color: rg

表单提交中文时出现乱码

下面是一个提交页面(submit.jsp),代码如下: <html> <head> <title>JSP的中文处理</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> </head> <body> <form name="form1" method=&quo

若表单含有上传图片时

需改变form中的enctype="multipart/form-data"和提交方式必须为"post" <form action="/reg_login/RegistServlet" method="post" enctype="multipart/form-data"> 数据的接收: // 定义一个Map集合用于保存接收到的数据: Map<String,String> map =

表单元素提交时ＪＳ判断输入的值为空时则不刷新页面返回，不为空跳转并传值到新页面

<body> <div id="div1" style="display:block;" > <div id="logo"></div> <div id="word1"></div> <div id="word2"></div> <form name="form1" method=&qu

js控制表单非法输入时提交

function isDate(){ var date = document.getElementById("pcDate").value; var result = date.match(/((^((1[8-9]\d{2})|([2-9]\d{3}))(-)(10|12|0?[13578])(-)(3[01]|[12][0-9]|0?[1-9])$)|(^((1[8-9]\d{2})|([2-9]\d{3}))(-)(11|0?[469])(-)(30|[12][0-9]|0?[1-

Django 表单（中）-动态实现select效果

在Django里面,看看如何通过form来实现一个动态地select下拉框的效果. 首先看看静态的select的效果 models.py class city(models.Model): name=models.CharField(max_length=32) #确保admin里面显示的是名字而不是object def __str__(self): return self.name admin.py from django.contrib import