Asp.Mvc中的text实现 辅助用户输入 灰色字体
时间:2022-04-22
本文章向大家介绍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);
演示:
- 14(01)正则表达式,Pattern,Mactcher,Math,BigInteger,BigDeximal,System等
- oracle的TAF浅析 (r6笔记第37天)
- R语言高级绘图命令(标题-颜色等)
- 14(02)正则表达式,Pattern,Mactcher,Math,BigInteger,BigDeximal,System等
- R语言 判别分析
- Apache、struts1、struts2文件上传下载的3种方式
- 解析实时的DB time过程分析(r6笔记第35天)
- sql嵌入html格式显示报表(r6笔记第34天)
- hive计算日期差函数datediff,hive修改日期连接符
- 深度学习界的 “吃鸡挂”——目标检测 SSD 实验
- Hadoop查看所有JOB以及如何Kill指定用户的所有Job
- Java基础-23(01)总结多线程,线程实现Runnable接口,线程名字获取和设置,线程控制,线程安全,同步线程
- ORA-01427问题的分析和解决(r6笔记第51天)
- 从编程实现角度学习 Faster R-CNN(附极简实现)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Python教程 | 最标准的地图调用方式(国家测绘局提供数据)
- Python数据可视化:Python大佬有哪些?
- 新手一看就懂的线程池
- 「面试」破(B)站之旅
- 想过为你的应用加上skywalking(链路监控)吗?
- 结合注意力机制的UNet降水短临预报框架
- 用Python全自动下载抖音视频!
- 如何实现一个高效的启发式算法?
- Python数据可视化:豆瓣电影TOP250
- 容器化 FRP 使用方案
- 任意图像转素描:Python分分钟实现
- Python数据科学:相关分析
- Python数据科学:正态分布与t检验
- Python数据科学:方差分析
- 推荐3个开源的快速开发平台,前后端都有,项目经验又有着落了!