一起CSS

当前位置:一起CSS > 用户体验 > 文章正文

让搜索更友好

日期:2008-12-8 分类:用户体验

站内搜索功能是网站必不可少的,它可以帮助浏览者搜索指定的或感兴趣的内容。搜索是由文本框和按钮组成,默认的情况下,在各个浏览器的效果不一样,甚至计算机系统主题的不同,也会使他们的效果不一样。这对访问者显然不友好。为了使搜索更友好,我们对它进行“加工”,让它在各种环境下都显示一致的效果,而且还给访问者提示。

搜索功能的 XHTML 代码一般如下:

<form id="form1" name="form1" method="post" action="">
<label>
<input type="text" name="keyword" id="keyword" />
</label>
<label>
<input type="submit" name="put-in" id="put-in" value="搜索" />
</label>
</form>

默认情况下,在各个浏览中的效果如下图:

给它加上样式:

*{
margin:0;
padding:0;
}
form{
position:relative;
margin:20px;
}
input{
position:absolute;
border:1px solid #00CCFF;
background:#fff;
}
#keyword{
width:150px;
height:24px;
padding-left:2px;
line-height:24px;
color:#bbb;
}
#put-in{
width:50px;
height:26px;
left:150px;
}

加上样式之后,在各个浏览器中的效果都如下图:

我们再给它添加提示:在 XHTML 代码中,给文本框加上默认的文字 value="请输入关键字" ,然后再加上 javascript 代码,使用户用鼠标点击文本框时,默认的文本消失,能够直接输入关键字。

javascript代码:

window.onload = function(){
var wordinput = document.getElementById("keyword");
wordinput.onfocus = function(){
this.value = "";
this.style.color = "#000"
}
wordinput.onblur = function(){
if(this.value == ""){
this.value = "请输入关键字";
this.style.color = "#bbb"
}
}
}

相关解释:

onfocus —— 元素聚焦时触发的事件

onblur —— 元素失去焦点时触发的事件

至此,制作完成。查看效果

查看:644 评论:1 标签:,

相关日志

只有 1 条评论

  • 谢锋 说:

    css的知识很全,非常佩服博主。各个浏览器对css的解释不同确实给设计的人带来许多不便,不过现在各个浏览器都趋向比较标准的了。

发表留言

请言之有物,无意义留言或只为留链接留言一律不予通过!

提示: 您可以使用一些简单的标签: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

分类

最新日志

最新评论

存档

链接

  • 亚当学院
  • CSS视频教程下载
  • 前沿视频教室
  • 前端爱好者
  • GoodText
  • Kily`s Blog
  • mymickey
  • 秦丰网站策划
  • 奥想创意
  • 我的职业生涯
  • 蜗爱CSS
  • 蜈蚣's Blog
  • web标准学习—小辉博客
  • 十字花匠

© Copyright 2010 一起CSS All Rights Reserved