网站input及textarea提示文字的样式及功能模块总结-阿里云开发者社区

开发者社区> evage> 正文

网站input及textarea提示文字的样式及功能模块总结

简介: web、前端、jQuery、Input、textarea、代码共用、优化
+关注继续查看
        coding表单的过程中,经常会遇到input及textarea的部分,而这两种标签几乎都伴随着框内提示文字的情况,如果把每处需要做提示的地方都做一套样式及脚本的话,又不利于网站的代码共用,并且调整起来也十分费力,所以今天在这儿把这部分提出来,以供 weber们参考,当然如有更好方法的话,也欢迎意见及吐槽!

        废话不多,上代码。


<form class="templateForm">
    <input type="text" name="inputName" value="我是Input,请输入!" />
    <br/>
    <br/>
    <div class="textareaDiv">
        <textarea>我是Textarea,请输入!</textarea>
    </div>
</form>

我们来做一个最简单的例子,页面内含有一个input及一个textarea,并且这两个标签都需要提示文字的出现,当光标聚焦到标签内时,提示文字消失,而光标离开时,如果框内没有输入文字,则默认文字出现。

我们给标签加上些简单的样式


.defaultColor {
    color: #d1d1d1!important;//设置默认提示文字的样式,此处体现为字体颜色。!important是为了避免颜色样式覆盖
}
.templateForm input[type="text"] {
    display: inline-block;
    width: 260px;
    height: 30px;
    line-height: 30px;
    border: 1px solid #666;
    font-size: 16px;
    color: #666;//设置input字体颜色
}
.textareaDiv textarea {
    padding: 10px;
    width: 798px;
    height: 125px;
    line-height: 25px;
    border: 1px solid #666;
    color: #666;//设置textarea字体颜色
}

浏览器输出为:

ea5c2a2f9395a640f4ec9845429e701a385231a5

接下来就到了我们要介绍的重点,也就是将提示文字及时出现及消失的功能合并到一起。页面事先引用了jquery,本人用的版本问jquery-1.7.2.min.js。


//站内共用文本框及textarea默认文本,调用 domDefaultTextFun(此段代码可以提取到站内公共js文件内以便各个文件调用)
function domDefaultTextFun($dom, $defaultTxt) {//$dom为目标dom节点,$defaultTxt为节点内默认提示的文字
    if ($($dom).val() ==  $defaultTxt) {

        $($dom).addClass("defaultColor");
    } else {
        $($dom).removeClass("defaultColor");
    }
    $($dom).focus(function(){
        if ($($dom).val() == $defaultTxt) {
            $($dom).val("").removeClass("defaultColor");
	}
    });
    $($dom).blur(function(){
        if (($($dom).val() == "") || ($($dom).val() == $defaultTxt)) {
            $($dom).val($defaultTxt).addClass("defaultColor");
	}
    });
}

接下来为页面调用上面的 domDefaultTextFun 函数



$(function(){
	//input[name='inputName']默认文本效果
	domDefaultTextFun("input[name='inputName']", "我是Input,请输入!");
	
	//.textareaDiv textarea默认文本效果
	domDefaultTextFun(".textareaDiv textarea", "我是Textarea,请输入!");
});

然后页面就这样做好了!以后站内再出现相关的文本域默认提示的情况,只要标签一加,然后函数调用,妥妥的!!网站input及textarea提示文字的样式及功能模块总结 - eva - eva_勤为径网站input及textarea提示文字的样式及功能模块总结 - eva - eva_勤为径

呈现下最后的效果:

14500b2671cfe19454a747484d0edcd5e386fd7c


















版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
近10年数据智能团队建设,联想总结了由内而外的发展经验 | 专访联想集团副总裁田日辉
近10年数据智能团队建设,联想总结了由内而外的发展经验 | 专访联想集团副总裁田日辉
39 0
css知多少(4)——解读浏览器默认样式
原文:css知多少(4)——解读浏览器默认样式   上一节《css知多少(3)——样式来源与层叠规则》介绍了样式的五种来源,咱们再通过一张图回顾一下。      对于上面的三层,咱们大概都比较熟悉了。
796 0
Jsp+JavaBean+Servlet实现模拟银行账户存取款等功能的网站(实习第4-8天)
本来想学J2EE的3个经典框架(Spring + Struts +Hibernate),奈何负责实习的老师只讲了Jsp+JavaBean+Servlet,项目时间还蛮紧的,所以只用JJS实现了这个项目,后面寒假有时间的话再用SSH实现并完善这个网站吧。前几天抽时间学了点前端的东西,感觉还是有点麻烦的,前端做既漂亮又有良好的兼容性不是件太容易的事情,所幸现在觉得能够静下来学技术做开发是件
1323 0
VMware备份文件即时恢复功能全新发布
HBR的VMware备份/恢复都是整机维度的,但是有些时候,我们或许只想要恢复备份中的某个文件,这样在恢复一个完整的虚拟机就有点高射炮打蚊子了。我们能不能直接从备份的数据里捞出来想要的文件呢?文件级恢复的功能便应运而生。
202 0
+关注
3
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载