专栏首页飞扬的花生Asp.Mvc中的text实现 辅助用户输入 灰色字体

Asp.Mvc中的text实现 辅助用户输入 灰色字体

      在开发Web应用程序中经常需要用户在文本框输入信息,为了提高程序人性化设置以及用户体验效果常常需要在文本框中显示灰色字体辅助用户输入

如:

"文本不能为空"是这样实现的,博主进行了适当的封装,建立简单MVC.NET应用程序的Demo引用Jquery的包,html代码

 1 @{
 2     ViewBag.Title = "Index";
 3 }
 4 <script src="~/Scripts/jquery-2.1.4.min.js"></script>
 5 <script src="~/Scripts/jquery-textboxhelper.js"></script>
 6 <script>
 7     $(function () {
 8         $('#button').click(function () {
 9             var getTextValue = $('#text').val();
10             if (getTextValue == '')
11             {
12                 alert("文本为空!");
13                 return;
14             }
15             alert(getTextValue);
16         })
17 
18 
19         $("#text").TextTip("文本不能为空");
20 
21     })
22 </script>
23 
24 <input  id="text" type="text" />
25 <input id="button"  type="button" value="输出文本值"/>

关键在于自定义js文件jquery-textboxhelper.js

 1 (function ($) {
 2     var defaults = {
 3         fontColor: '#ccc',
 4         tipContent: '请输入内容',
 5         focusColor: 'black'
 6     };
 7 
 8     $.fn.TextTip = function (tipContent, fontColor) {
 9         var options = {};
10         $.extend(options, defaults)
11 
12         if (typeof tipContent == 'string') {
13             options.tipContent = tipContent
14         }
15 
16         if (typeof fontColor == 'string') {
17             options.fontColor = fontColor
18         }
19 
20         this.each(function () {
21             $(this).bind({
22                 focus: function () {
23                     if (this.value == options.tipContent) {
24                         this.value = "";
25                         this.style.color = options.focusColor
26                     }
27 
28                 }, blur: function () {
29                     if (this.value == "") {
30                         this.value = options.tipContent;
31                         this.style.color = options.fontColor
32                     }
33                 }
34             })
35 
36             $(this).val(options.tipContent).css('color', options.fontColor);
37             $(this).blur();
38         })
39     }
40 })(jQuery);

演示:

源代码下载

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 一步一步学习Bootstrap系列--表单布局

    前言:Bootstrap 属于前端 ui 库,通过现成的ui组件能够迅速搭建前端页面,简直是我们后端开发的福音,通过几个项目的锻炼有必要总结些常用的知识,本篇把...

    用户1055830
  • C#List的排序和简单去重总结

          List集合在开发过程中很常见,经常我们要对该集合进行一系列操作,本文介绍如何将该集合内的元素进行排序,博主制作简单WinForm应用程序进行演示。...

    用户1055830
  • jsencrypt参数前端加密c#解密

          写程序时一般是通过form表单或者ajax方式将参数提交到服务器进行验证,如何防止提交的请求不被抓包后串改,虽然无法说绝对安全却给非法提交提高了难度...

    用户1055830
  • ROS_Kinetic_05 ROS基础内容(二)

    官网教程:http://wiki.ros.org/cn/ROS/Tutorials/UnderstandingNodes

    zhangrelay
  • Android Hook告诉你 如何启动未注册的Activity

    Android Hook 插件化其实已经不是什么新鲜的技术了,不知你有没有想过,支付宝中那么多小软件:淘票票 ,火车票等软件,难道是支付宝这个软件自己编写的吗?...

    黄林晴
  • python利用smtp来发送邮件(带附件)

    V站CEO-西顾
  • music21 关联 MuseScore

    在python安装 music21后,需要关联 musescore 或 lilypond 才能可以用图形化的形式看到 乐谱。

    py3study
  • python利用smtp来发送邮件(带附件)

    禹都一只猫olei
  • IDF2011参会记

    今年有幸得到了免费参加IDF2011大会的机会,于是早早的出门去参会。早上一到会场,就已经有很多的人在排队等着进入主题演讲。

    大江小浪
  • 【小家Spring】Spring解析@ComponentScan注解源码分析(ComponentScanAnnotationParser、ClassPathBeanDefinitionScanner)

    前面我在这篇博文:【小家Spring】Spring解析@Configuration注解的处理器:ConfigurationClassPostProcessor(...

    YourBatman

扫码关注云+社区

领取腾讯云代金券