搜索框js样式(通用型)
2014-03-14 09:36
155 查看
HTML部分代码:
——————————————————————————————————————————————————————————————
<div class="search_box">
<from>
<ul class="search_ul">
<li><input type="text" name="point" value="地点" onblur="returnvalue(this, '地点')" onfocus="Search(this, '地点')" id="obj1" style="color:#999;"/></li>
<li><input type="text" name="point" value="请输入关键字" onblur="returnvalue(this, '请输入关键字')" onfocus="Search(this, '请输入关键字')" style="color:#999;"/></li>
<li class="li_color"><input type="button" name="search" value="搜索" /></li>
</ul>
</from>
</div>
js样式:
———————————————————————————————————————————————————————————————
//得到焦点触发事件
function Search(element,elementvalue)
{
if(element.value==elementvalue)
{
element.value="";
element.style.color="#000";
}
}
//离开输入框时触发事件
function returnvalue(element,elementvalue)
{
if(element.value=="" || element.value.replace(/\s/g,"")=="")
{
element.value=elementvalue;
element.style.color="#999";
}
}
——————————————————————————————————————————————————————————————
<div class="search_box">
<from>
<ul class="search_ul">
<li><input type="text" name="point" value="地点" onblur="returnvalue(this, '地点')" onfocus="Search(this, '地点')" id="obj1" style="color:#999;"/></li>
<li><input type="text" name="point" value="请输入关键字" onblur="returnvalue(this, '请输入关键字')" onfocus="Search(this, '请输入关键字')" style="color:#999;"/></li>
<li class="li_color"><input type="button" name="search" value="搜索" /></li>
</ul>
</from>
</div>
js样式:
———————————————————————————————————————————————————————————————
//得到焦点触发事件
function Search(element,elementvalue)
{
if(element.value==elementvalue)
{
element.value="";
element.style.color="#000";
}
}
//离开输入框时触发事件
function returnvalue(element,elementvalue)
{
if(element.value=="" || element.value.replace(/\s/g,"")=="")
{
element.value=elementvalue;
element.style.color="#999";
}
}
相关文章推荐
- 搜索框js样式(通用型)
- div滚动条属性及样式设置
- android 颜色收集及部分gridview样式设置
- CSS3 DIY浏览器滚动条样式
- jQuery Mobile动态刷新页面样式的实现方法
- 前端学习 -- Css -- 文本样式
- 超链接访问过后hover样式就不出现的问题是什么?如何解决?
- alert 样式自定义,div半透明遮盖
- Devexpress gridcontrol设置列样式
- 自定义select样式
- css 重置样式
- Css cursor设置鼠标指针显示样式
- DataGridView样式生成器使用说明
- Word中新建样式/修改样式对话框中的各个选项意义
- Android 自定义Checkbox显示样式
- 使用js改变DOM样式的三种方式 - className属性
- 复位样式——随时更新
- 使用JavaScript修改伪类样式的方法总结
- 含缓动公式的js样式
- 4种样式的HTML可视化图形报表