﻿<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>任刚的博客 ★ Ren Gang &#039;s Blog</title>
	<atom:link href="http://blog.rengang.org/feed" rel="self" type="application/rss+xml" />
	<link>http://blog.rengang.org</link>
	<description>关注以用户为中心的平面设计、网页设计 http://blog.rengang.org/</description>
	<lastBuildDate>Sat, 04 Feb 2012 06:12:24 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>搜索框输入时提示文字自动隐藏</title>
		<link>http://blog.rengang.org/prompt-in-the-search-box-to-enter-text-automatically-hide.html</link>
		<comments>http://blog.rengang.org/prompt-in-the-search-box-to-enter-text-automatically-hide.html#comments</comments>
		<pubDate>Sat, 04 Feb 2012 05:55:24 +0000</pubDate>
		<dc:creator>任刚</dc:creator>
				<category><![CDATA[网页设计]]></category>
		<category><![CDATA[提示文字]]></category>
		<category><![CDATA[搜索]]></category>
		<category><![CDATA[搜索框]]></category>
		<category><![CDATA[用户体验]]></category>
		<category><![CDATA[网页]]></category>
		<category><![CDATA[自动]]></category>
		<category><![CDATA[自动隐藏]]></category>
		<category><![CDATA[输入]]></category>
		<category><![CDATA[隐藏]]></category>

		<guid isPermaLink="false">http://blog.rengang.org/?p=50</guid>
		<description><![CDATA[出于友好的用户体验考虑，内容比较丰富的网站搜索功能是必须有的，我们不仅要在网页上加上站内搜索框，而且搜索框的提示文本最好能让他在用户输入文本时自动隐藏，而不用一直按住Backspace，下面来看一个简单的输入框表单实例：
<pre>
<div class="search">
        <form id="form1" name="form1" method="post" action="">
          <label><span>
            <input name="q" type="text" class="keywords" id="textfield" maxlength="50" value="站内搜索" onfocus="if (value =='站内搜索'){value =''}" onblur="if (value ==''){value='站内搜索'}" />
            </span>
            <input name="b" type="image" src="http://rengang.org/img/search.gif" class="button" />
          </label>
        </form>
      </div>
</pre>
你还可以对输入时搜索框的样式进行调整来讨好用户，比如改变搜索框背景色：
<pre>
<input value="站内搜索"  onmouseover="this.style.borderColor='black';this.style.backgroundColor='plum'"style="border-color:black; border-width:1px; "onmouseout="this.style.borderColor='black';this.style.backgroundColor='#ffffff'" style="border-width:1px;border-color=black" onfocus="if (value =='站内搜索''){value =''}" onblur="if (value ==''){value='站内搜索''}" />
</pre>]]></description>
		<wfw:commentRss>http://blog.rengang.org/prompt-in-the-search-box-to-enter-text-automatically-hide.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

