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

  1. 云栖社区>
  2. 博客列表>
  3. 正文

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

evage 2016-06-02 16:51:37 浏览3129 评论0

摘要: 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


















【云栖快讯】阿里云栖开发者沙龙(Java技术专场)火热来袭!快来报名参与吧!  详情请点击

网友评论

evage
文章3篇 | 关注0
关注
国内建站市场NO.1 查看详情
阿里云依据网站不同的发展阶段,提供更合适的架构方案,有效降低网站的开发运维难度和整体IT成本... 查看详情
业内领先的面向企业的一站式研发提效平台(研发效能),通过项目流程管理和专项自动化提效工具,能... 查看详情
为您提供简单高效、处理能力可弹性伸缩的计算服务,帮助您快速构建更稳定、安全的应用,提升运维效... 查看详情
双12

双12