文本框输入为空时显示的内容

最新推荐文章于 2022-05-19 11:15:33 发布
最新推荐文章于 2022-05-19 11:15:33 发布
阅读量6.8k 收藏 1
点赞数 2
分类专栏： HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xxz_best/article/details/45646113
版权 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script src="js/jquery.min.js" type="text/javascript"></script>
</head>

<body>
<p ><span>姓  名：</span>
          <input type="text" class="name" name="name" value="请输入您的姓名" οnfοcus="if (value =='请输入您的姓名'){value =''}" οnblur="if (value ==''){value='请输入您的姓名'}">
        </p>
        <p class="p_c"><span>手机号码：</span>
          <input type="text"  name="contacts" id="contacts"  placeholder="输入您的联系电话">
        </p> 
</body>
</html>

虽然IE10+支持placeholder属性，它的表现与其它浏览器也不一致

  • IE10+里鼠标点击时（获取焦点）placeholder文本消失
  • Firefox/Chrome/Safari点击不消失，而是键盘输入时文本消失

ie10中姓名和手机号码显示的不同的效果显示的效果




姓名的提示输入文字Firefox/Chrome/Safari 获取焦点是文本消失，而手机号码的输入格式，是输入文字之前删除原来文本框中的文字

霖霏晗
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery 动态处理页面中input 非空验证，和部分格式验证信息
04-17
/** * 给引用页面动态添加验证事件 * 案例：<div class="col-sm-8"> <label>及格分数</label> <input type="text" id="PassScore" mstype="1" msg="及格分数" fmt="float"> <span>分</span> </div> * 解释：input id 为必有项， mstype="1":标识该输入框为需要校验 msg="及格分数" msg：标识这个文本框需要输入的内容名称 fmt="float" * fmt 标识校验数据类型的格式，目前支持 int 整型 ; float: 小数; mobile：手机号格式校验；email：格式校验； * 前台展示后代码为 * <div class="col-sm-8"> <label>及格分数</label> <input type="text" id="PassScore" mstype="1" msg="及格分数" fmt="float"> <span>分</span> <div name='error'><span style='color: Red;font-size: 12px;'><i class='fa fa-info-circle'></i>几个分数不能为空</span></div> </div> * checkallStr() 校验页面中所有标识的输入框信息 使用场景 是 * msginfo(objid,objmess) 校验非空信息提示 #B0B0B0 灰色色值 * errinfo(objid,objmess) 校验格式错误信息提示 RED 红色色值 */
C#判断多个文本框是否为空的方法
09-03
在用户未输入任何内容时，`Text`属性的值通常是空字符串（""），因此我们可以通过检查这个属性来判断文本框是否为空。 要判断多个文本框是否为空，可以编写一个自定义方法，接受一个TextBox类型的数组作为参数。...
html5输入空白提示,HTML5 placeholder(空白提示)属性介绍
weixin_42696271的博客
06-10 296
浏览器引入了许多的HTML5 特性其中我最喜欢的一个就是为input元素引入了placeholder属性，placeholder属性显示引导性文字直到输入框获取输入焦点,当有了用户输入内容后引导性内容将会自动隐藏...
html文本框不能为空验证,jquery怎么判断输入框是否为空？
weixin_39878716的博客
06-03 1472
jquery判断输入框是否为空的方法：$(document).ready(function () {$("#btnConfirm").click(function () {if ($("#txtHandleSituation").val() == "") {$("#lblContentTips").text("*文本框不能为空.");return false;}});});使用val()方法获取输...
验证文本框不能为空、Email合法性
Discussing的专栏
06-08 1901
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml"> 范例13-5function check(){   var Len=form1.elements.length; for(var i=0;i {  if(form1.elements[i].value.length==0) 
JS文本框不能输入空格验证方法
12-09
1、只是不能输入空格 代码如下:<input type=”text” onkeyup=”this.value=this.value.replace(/^ +| +$/g,”)”>2、不能输入空格及英文状态下的逗号 代码如下: <input type=”text” onkeyup=”this.value=this.value.replace(/[, ]/g,”)”>3、 代码如下:[removed]        function myfunction() {            var a = $(“text1”).val();          
js文本框输入内容智能提示效果
10-23
JavaScript（简称JS）文本框输入内容智能提示效果是一种常见的用户界面增强技术，它可以在用户在文本框中输入内容时提供实时的建议或匹配项，提高了用户体验。这种效果通常用于搜索框、地址输入、标签添加等场景，...
当某个文本框成为焦点时即清除文本框内容
09-04
在网页设计中，有时我们需要实现一个功能：当用户点击或触摸到某个文本输入框（文本框）时，该文本框内的预设文字自动消失，让用户能够直接输入新内容。这个功能在很多场合都非常实用，例如登录页面的用户名或密码...
jQuery文本框输入文字自动筛选代码
06-10
在本文中，我们将深入探讨如何使用jQuery实现一个文本框输入文字自动筛选的功能，这在许多网页应用中都是一项实用的功能，比如搜索栏、过滤列表等。这个功能的主要目的是提高用户体验，让用户在输入关键字时能够实时...
C#文本框输入提示功能
05-18
当文本框失去焦点且内容为空时，显示提示文本；反之，当文本框获得焦点时，如果之前显示了提示文本，则将其清除。 ```csharp protected override void OnGotFocus(RoutedEventArgs e) { base.OnGotFocus(e); if ...
文本框为空的另一种js提示
qq_33205354的博客
05-24 470
function pd(){                var age=document.getElementById("age").value;                var re=(age=="")?"不能为空":"正确的填写";                                document.getElementById("info").innerHTML=re;...
HTML中input标签使用法汇总
m0_67846661的博客
05-19 1万+
HTML input标签的属性： 1.type：该属性是input标签里唯一的必须输入的属性，当然，也可以不填，默认为type = “text”。具体它有那些值，我们后面再讨论。 2.required：标记一个字段是否为必须。如果一个字段被标记为required = “required”（严格模式下），或者required（宽松模式下）(ps：下面属性的写法同理，就不一一写出了)，并且这个字段的值为空，或者填入的值是无效值，那么这个表单不能提交。什么是无效值？看pattern属性。 3.pattern
html检查输入为空,html input输入验证不为空
weixin_32927133的博客
06-04 1243
html5的话使用required即可，比较简单。但是ie10以下的浏览器没有required特性。所以就要靠其他方式来对用户输入做验证。下面是利用js的方法：function validate(){var domain = document.getElementById('domain').value;var domainInfo = document.getElementById('domai...
html input输入验证不为空
weixin_34250709的博客
11-15 1万+
html5的话使用required即可，比较简单。但是ie10以下的浏览器没有required特性。所以就要靠其他方式来对用户输入做验证。下面是利用js的方法： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 <scripttype="text/Jav...
html之input 的非空验证
热门推荐
milijiangjun的博客
09-25 2万+
if (Username == "" || Username.value == null ) { alert("请输入内容"); } 在这里可以通过input的id var Username = document.getElementById("UserName").value; 获取，然后判断是否为空 整体实现代码的方法如...
input标签和button放在一行写:inline元素的空白间隙问题
周公淡的博客
09-25 2万+
问题的缘由是因为我要写一个小组件,让一个input文本框和一个button按钮放在一行，类似如下的效果: 我的css设置如下：.same{ padding: 0; margin: 0; box-sizing: border-box; border: 0; height: 30px; } .div{ width: 300px; height:
input输入框为空提示内容变化
快乐每一天
05-28 1665
// 如果输入内容为空 var captionTxt = $(".caption").text(); if(!inputContent){ $(".caption").text("请输入内容").animate({opacity: 1.25}, 3000, function(){ $(this).text(captionTxt); }); $("#inputContentA...
HTML属性placeholder，输入框为空时显示的内容
lydiacheung的博客
09-07 4699
HTML属性placeholder，输入框为空时显示的内容
java，gui，文本框如何不显示输入内容
最新发布
05-25
你可以使用 JPasswordField 类来创建一个密码框，这样输入的内容就会被掩盖，不会直接显示在文本框中。 以下是一个简单的示例代码： ```java import javax.swing.*; public class PasswordFieldExample { public static void main(String[] args) { JFrame frame = new JFrame("Password Field Example"); // 创建一个密码框 JPasswordField passwordField = new JPasswordField(); // 把密码框添加到窗口中 frame.add(passwordField); // 设置窗口大小并显示 frame.setSize(300, 200); frame.setVisible(true); } } ``` 运行上述代码后，你会看到一个空白的密码框，输入的内容将会被掩盖。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值