&nbsp>&nbsp
&nbsp>&nbsp
&nbsp>&nbsp
html input文本框 输入框提示（hint）内容的实现
摘要：HTML开发中经常遇到input元素,往往又需要提示使用者输入一定规则的内容,这时最好的一个方法就是在input里面实现一个提示,实现如下方式:输入框为空时提示内容出现,当输入框获得焦点时或输入框不为空时则消失。1.通过HTML5引入的新属性placeholder实现[html]viewplaincopyprint?&!doctype&html&&&&html&&&&head&&&
HTML开发中经常遇到input元素,往往又需要提示使用者输入一定规则的内容,这时最好的一个方法就是在input里面实现一个提示,实现如下方式:输入框为空时提示内容出现,当输入框获得焦点时或输入框不为空时则消失。
1.通过HTML5引入的新属性placeholder实现
&!doctype&html
&&&&Postcode:
&!doctype html&
&meta charset=&utf-8&&
&title&html input 输入框提示(hint)内容的实现&/title&
&form action=&/testform.asp& method=&get&&
Postcode:&input type=&text& name=&zip_code& pattern=&[0-9]{6}& placeholder=&请输入0-9的6位数编码&/&
&input type=&submit& value=&Submit&/&
&/html& 显示提示内容“请输入...”
获取焦点后hint消失
& 输入内容后hint消失
没有按照规则&pattern=&[0-9]{6}&输入了7位数字,报错
-------------------------------------------------------------------------------- --------------------------------------------------------------------------------
2.非HTML5方式,通过js方式
代码如下: [html]
&!DOCTYPE&html&PUBLIC&&-//W3C//DTD&XHTML&1.0&Transitional//EN&&&http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&
&$(document).ready(function(){&&
&&&$(&#focus&.input_txt&).each(function(){&&
&&&&&var&thisVal=$(this).val();&&
&&&&&//判断文本框的值是否为空,有值的情况就隐藏提示语,没有值就显示&&
&&&&&if(thisVal!=&&){&&
&&&&&&&$(this).siblings(&span&).hide();&&
&&&&&&}else{&&
&&&&&&&$(this).siblings(&span&).show();&&
&&&&&//聚焦型输入框验证&&&
&&&&&$(this).focus(function(){&&
&&&&&&&$(this).siblings(&span&).hide();&&
&&&&&&}).blur(function(){&&
&&&&&&&&var&val=$(this).val();&&
&&&&&&&&if(val!=&&){&&
&&&&&&&&&$(this).siblings(&span&).hide();&&
&&&&&&&&}else{&&
&&&&&&&&&$(this).siblings(&span&).show();&&
&&&&&&&&}&&&
&&&&&&});&&
&&&&$(&#keydown&.input_txt&).each(function(){&&
&&&&&var&thisVal=$(this).val();&&
&&&&&//判断文本框的值是否为空,有值的情况就隐藏提示语,没有值就显示&&
&&&&&if(thisVal!=&&){&&
&&&&&&&$(this).siblings(&span&).hide();&&
&&&&&&}else{&&
&&&&&&&$(this).siblings(&span&).show();&&
&&&&&&$(this).keyup(function(){&&
&&&&&&&var&val=$(this).val();&&
&&&&&&&$(this).siblings(&span&).hide();&&
&&&&&&}).blur(function(){&&
&&&&&&&&var&val=$(this).val();&&
&&&&&&&&if(val!=&&){&&
&&&&&&&&&$(this).siblings(&span&).hide();&&
&&&&&&&&}else{&&
&&&&&&&&&$(this).siblings(&span&).show();&&
&&&&&&&&}&&
&&&&&&&})&&
&&&&&})&&&
&form{width:400margin:10px&border:solid&1px&#E0DEDE;background:#FCF9EF;padding:30box-shadow:0&1px&10px&rgba(0,0,0,0.1)&}&&
&label{display:height:40position:margin:20px&0;}&&
&span{position:float:line-height:40left:10color:#BCBCBC;cursor:}&&
&.input_txt{width:398border:solid&1px&#box-shadow:0&1px&10px&rgba(0,0,0,0.1)&height:38text-indent:10}&&
&.input_txt:focus{box-shadow:0&0&4px&rgba(255,153,164,0.8);border:solid&1px&#B00000;}&&
&.border_radius{border-radius:5color:#B00000;}&&
&h2{font-family:&微软雅黑&;text-shadow:1px&1px&3px&#}&&
&!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&&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
&title&文本框获取焦点或输入文字后提示语消失&/title&
&script type=&text/javascript& src=&04-11.js&&&/script&
&script type=&text/javascript&&
$(document).ready(function(){
$(&#focus .input_txt&).each(function(){
var thisVal=$(this).val();
//判断文本框的值是否为空,有值的情况就隐藏提示语,没有值就显示
if(thisVal!=&&){
$(this).siblings(&span&).hide();
$(this).siblings(&span&).show();
//聚焦型输入框验证
$(this).focus(function(){
$(this).siblings(&span&).hide();
}).blur(function(){
var val=$(this).val();
if(val!=&&){
$(this).siblings(&span&).hide();
$(this).siblings(&span&).show();
$(&#keydown .input_txt&).each(function(){
var thisVal=$(this).val();
//判断文本框的值是否为空,有值的情况就隐藏提示语,没有值就显示
if(thisVal!=&&){
$(this).siblings(&span&).hide();
$(this).siblings(&span&).show();
$(this).keyup(function(){
var val=$(this).val();
$(this).siblings(&span&).hide();
}).blur(function(){
var val=$(this).val();
if(val!=&&){
$(this).siblings(&span&).hide();
$(this).siblings(&span&).show();
&style type=&text/css&&
form{width:400margin:10border:solid 1px #E0DEDE;background:#FCF9EF;padding:30box-shadow:0 1px 10px rgba(0,0,0,0.1)}
label{display:height:40position:margin:20px 0;}
span{position:float:line-height:40left:10color:#BCBCBC;cursor:}
.input_txt{width:398border:solid 1px #box-shadow:0 1px 10px rgba(0,0,0,0.1)height:38text-indent:10}
.input_txt:focus{box-shadow:0 0 4px rgba(255,153,164,0.8);border:solid 1px #B00000;}
.border_radius{border-radius:5color:#B00000;}
h2{font-family:&微软雅黑&;text-shadow:1px 1px 3px #}
&form class=&border_radius& id=&focus&&
&h2&聚焦型提示语消失&/h2&
&label&&span&用户名或邮箱地址&input type=&text& class=&input_txt border_radius&
/&&/label&
&label&&span&密码&input type=&text& class=&input_txt border_radius& /&&/label&
&form class=&border_radius& id=&keydown&&
&h2&输入型提示语消失&/h2&
&label&&span&用户名或邮箱地址&input type=&text& class=&input_txt border_radius&
/&&/label&
&label&&span&密码&input type=&text& class=&input_txt border_radius& /&&/label&
&a href=&http://www.w3school.com.cn/tiy/t.asp?f=html_basic&&W3School在线测试&/a&&/script&
其中 [html]
&script type=&text/javascript& src=&04-11.js&&&/script& &pre name=&code& class=&html&&04-11.js &span style=&font-family: Arial, Helvetica, sans-&&是将URL:&span style=&font-family: Arial, Helvetica, sans-&&&a target=_blank href=&http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js&&http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js&/a&代码copy到本地,方便每次快速载入,亦可以写成如下格式: & [html]
&pre name=&code& class=&html&&&script type=&text/javascript& src=&&pre name=&code& class=&html&&http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js &&&/script& &
& 效果如下图所示:
版权声明:本文为博主原创文章,未经博主允许不得转载。
以上是的内容，更多
的内容，请您使用右上方搜索功能获取相关信息。
若你要投稿、删除文章请联系邮箱：zixun-group@service.aliyun.com,工作人员会在五个工作日内给你回复。
云服务器 ECS
可弹性伸缩、安全稳定、简单易用
&40.8元/月起
预测未发生的攻击
&24元/月起
邮箱低至5折
推荐购买再奖现金，最高25%
&200元/3月起
你可能还喜欢
你可能感兴趣
阿里云教程中心为您免费提供
html input文本框 输入框提示（hint）内容的实现相关信息，包括
的信息，所有html input文本框 输入框提示（hint）内容的实现相关内容均不代表阿里云的意见！投稿删除文章请联系邮箱：zixun-group@service.aliyun.com，工作人员会在五个工作日内答复
售前咨询热线
支持与服务
资源和社区
关注阿里云
International博客分类：
&title&测试数字&/title&
function onCheck(){
var numValue=document.getElementById("num").
var index=-1;
for(var i=0;i&numValue.i++){
var ch=numValue.charAt(i);
if(ch&=0&&ch&=9){
if(index==1){
alert("您输入的非数字！请重新输入");
document.getElementById("num").value="";
alert("输入正确！您输入的数字是："+numValue);
function onCheck1(){
var numValue=document.getElementById("num1").
if(isNaN(numValue)){
alert("您输入的非数字！请重新输入...");
document.getElementById("num1").value="";
alert("输入正确！您输入的数字是:"+numValue);
&h3&测试输入是否是数字第一种方法&/h3&
&input type="text" id="num" /&
&input type="button" value="测试1" onclick="onCheck()" /&
&h3&测试输入是否是数字第二种方法&/h3&
&input type="text" id="num1" /&
&input type="button" value="测试2" onclick="onCheck1()" /&
yuming.xiao
浏览: 14908 次
来自: 宁波
好全~谢谢分享
(window.slotbydup=window.slotbydup || []).push({
id: '4773203',
container: s,
size: '200,200',
display: 'inlay-fix'如何才能在提交时判断文本框中是否有HTML标签_百度知道
如何才能在提交时判断文本框中是否有HTML标签
我有更好的答案
asp.net默认就禁止了提交HTML标签，你可以在web.config中进行配置，或者手动提交一个HTML标签并在服务器返回的错误信息中获得帮助。
【0元入学，两周免费试听】
主营：培训【Python+人工智能，Java大数据，HTML5】
为您推荐：
其他类似问题
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。html问题。一个FORM表单，怎样让submit验证指定数据，验证成功后在提交至指定页面中呢？_百度知道
html问题。一个FORM表单，怎样让submit验证指定数据，验证成功后在提交至指定页面中呢？
如一个登陆模块，先验证用户名是否为空，如果为空，SUBMIT点击时永远提交不到from表单指定页面。只能是表单形式发送噢！而且不能再表单指定的页面中去验证传进来的值。
我有更好的答案
js方法：function check(){
var name = document.getElementById(&name&).
if(name ==
null || name == ''){
alert(&用户名不能为空&);
}}&form name=&form& action=&跳转的页面& method=&post&
onsubmit=&return check()&&
&input type=&text& id=&name&/&
&input type=&sumit& value=&提交&/&&/form&
采纳率：25%
不能用submit，只能用button，定义一个button的onclick事件写一个javascript，在js中验证和实现跳转就可以了，例如：&input type=&button& value=&ss& onclick=&haha()&&function haha(){window.location=&index.html&;}
&form name=&form& action=&test.html& method=&post&
onsubmit=&return check()&&
&input type=&text& id=&name&/&
&input type=&sumit& value=&提交&/&&/form& function check(){
var name = document.getElementById(&name&).
if(name ==
null || name == ''){
alert(&不能为空&);
为您推荐：
其他类似问题
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。这样子的情况下，只要在文本框输入内容，就会自动提交到ajax，怎么才能点击提交按钮才提交呢。_html/css_WEB-ITnose
原创
 12:23:12
133
&input type=&text& name=&cu&
onClick=&showCustomer(this.value)& &
&input type=&submit& name=&Submit& value=&提交&&
这样子的情况下，只要在文本框输入内容，就会自动提交到ajax，怎么才能点击提交按钮才提交呢。
回复讨论(解决方案)
&form &&input type=&text& name=&cu& id=&cu& /&&input type=&submit& name=&Submit& value=&提交& onSubmit=&showCustomer(document.getElementById('cu').value)& /&&/form&
&form &&input type=&text& name=&cu& id=&cu& /&&input type=&submit& name=&Submit& value=&提交& onSubmit=&showCustomer(document.getElementById('cu').value)& /&&/form&
你这样子好像也不对呢，兄弟。。。
&form &&input type=&text& name=&cu& id=&cu& /&&input type=&submit& name=&Submit& value=&提交& onSubmit=&showCustomer(document.getElementById('cu').value)& /&&/form&
test.html?cu=&Submit=%CC%E1%BD%BB
你这样子提交后，浏览器居然在后面带出了参数，我是想用ajax的方式提交，不刷新页面显示数据？
&!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/ charset=utf-8& /&&title&无标题文档&/title&&/head&&body&&form name=&form1&&&input type=&text& name=&cu& id=&cu& /&&input type=&submit& name=&Submit& value=&提交& onclick=&return showCustomer(document.getElementById('cu').value)& /& &/form&&script type=&text/javascript&&function showCustomer(e){ alert(e);
}&/script&&/body&&/html&
对 不起input元素没有onsubmit事件.在alert(e),哪里写你的ajax代码
对 不起input元素没有onsubmit事件.在alert(e),哪里写你的ajax代码
你太客气了，我试试看，感谢了。
对 不起input元素没有onsubmit事件.在alert(e),哪里写你的ajax代码
你太客气了，我试试看，感谢了。
把js文件换成我的。。还是会test.html?cu=&Submit=%CC%E1%BD%BB
贴一下你写的吧
&form&&input type=&text& name=&customers& id=&customers& /&&input type=&submit& name=&Submit& value=&提交& onClick=&return showCustomer(document.getElementById('customers').value)& /& &/form&&script type=&text/javascript&&var xmlHttpfunction showCustomer(str){ xmlHttp=GetXmlHttpObject();if (xmlHttp==null)
alert (&您的浏览器不支持AJAX！&);
} var url=&getcustomer.php&;url=url+&?q=&+url=url+&&sid=&+Math.random();xmlHttp.onreadystatechange=stateCxmlHttp.open(&GET&,url,true);xmlHttp.send(null);}function stateChanged(){ if (xmlHttp.readyState==4){ document.getElementById(&txtHint&).innerHTML=xmlHttp.responseT}}function GetXmlHttpObject(){var xmlHttp=try
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}catch (e)
// Internet Explorer
xmlHttp=new ActiveXObject(&Msxml2.XMLHTTP&);
xmlHttp=new ActiveXObject(&Microsoft.XMLHTTP&);
}return xmlH&/script&&p&&p id=&txtHint&&&b&客户信息将在此处列出。&/b&&/p&&/p&
&!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/ charset=utf-8& /&&title&无标题文档&/title&&/head&&body&&form&&input type=&text& name=&customers& id=&customers& /&&input type=&submit& name=&Submit& value=&提交& onClick=&return showCustomer(document.getElementById('customers').value)& /& &/form&&script type=&text/javascript&&var xmlHttpfunction showCustomer(str){
xmlHttp=GetXmlHttpObject(); if (xmlHttp==null){
alert (&您的浏览器不支持AJAX！&);
var url=&getcustomer.php&; url=url+&?q=&+ url=url+&&sid=&+Math.random(); xmlHttp.onreadystatechange=stateC xmlHttp.open(&GET&,url,true); xmlHttp.send(null); }function stateChanged(){
if (xmlHttp.readyState==4){
document.getElementById(&txtHint&).innerHTML=xmlHttp.responseT }}function GetXmlHttpObject(){ var xmlHttp= try{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}catch (e)
// Internet Explorer
xmlHttp=new ActiveXObject(&Msxml2.XMLHTTP&);
}catch (e){
xmlHttp=new ActiveXObject(&Microsoft.XMLHTTP&);
} return xmlH}&/script&&p&&p id=&txtHint&&&b&客户信息将在此处列出。&/b&&/p&&/p&&/body&&/html&
&!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/ charset=utf-8& /&&title&无标题文档&/title&&/head&&body&&form&&input type=&text& name=&customers& id=&customers& /&&input type=&submit& name=&Submit& value=&提交& onClick=&return showCustomer(document.getElementById('customers').value)& /& &/form&&script type=&text/javascript&&var xmlHttpfunction showCustomer(str){
xmlHttp=GetXmlHttpObject(); if (xmlHttp==null){
alert (&您的浏览器不支持AJAX！&);
var url=&getcustomer.php&; url=url+&?q=&+ url=url+&&sid=&+Math.random(); xmlHttp.onreadystatechange=stateC xmlHttp.open(&GET&,url,true); xmlHttp.send(null); }function stateChanged(){
if (xmlHttp.readyState==4){
document.getElementById(&txtHint&).innerHTML=xmlHttp.responseT }}function GetXmlHttpObject(){ var xmlHttp= try{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}catch (e)
// Internet Explorer
xmlHttp=new ActiveXObject(&Msxml2.XMLHTTP&);
}catch (e){
xmlHttp=new ActiveXObject(&Microsoft.XMLHTTP&);
} return xmlH}&/script&&p&&p id=&txtHint&&&b&客户信息将在此处列出。&/b&&/p&&/p&&/body&&/html&
高人，可以了，。感谢了。
大师请看我的这个帖子。。
http://bbs.csdn.net/topics/
&form&&input type=&text& name=&customers& id=&customers& /&&input type=&submit& name=&Submit& value=&提交& onClick=&return showCustomer(document.getElementById('customers').value)& /& &/form&&script type=&text/javascript&&var xmlHttpfunction showCustomer(str){ xmlHttp=GetXmlHttpObject();if (xmlHttp==null)
alert (&您的浏览器不支持AJAX！&);
} var url=&getcustomer.php&;url=url+&?q=&+url=url+&&sid=&+Math.random();xmlHttp.onreadystatechange=stateCxmlHttp.open(&GET&,url,true);xmlHttp.send(null);}function stateChanged(){ if (xmlHttp.readyState==4){ document.getElementById(&txtHint&).innerHTML=xmlHttp.responseT}}function GetXmlHttpObject(){var xmlHttp=try
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}catch (e)
// Internet Explorer
xmlHttp=new ActiveXObject(&Msxml2.XMLHTTP&);
xmlHttp=new ActiveXObject(&Microsoft.XMLHTTP&);
}return xmlH&/script&&p&&p id=&txtHint&&&b&客户信息将在此处列出。&/b&&/p&&/p&
江湖传言：PHP是世界上最好的编程语言。真的是这样吗？这个梗究竟是从哪来的？学会本课程，你就会明白了。
PHP中文网出品的PHP入门系统教学视频，完全从初学者的角度出发，绝不玩虚的，一切以实用、有用...
ThinkPHP是国内最流行的中文PHP开发框架,也是您Web项目的最佳选择。《php.cn独孤九贱(5)－ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例，从最基本的框架常识开始，将...
本套教程,以一个真实的学校教学管理系统为案例,手把手教会您如何在一张白纸上,从零开始,一步一步的用ThinkPHP5框架快速开发出一个商业项目。
《php.cn原创html5视频教程》课程特色：php中文网原创幽默段子系列课程，以恶搞，段子为主题风格的php视频教程！轻松的教学风格，简短的教学模式，让同学们在不知不觉中，学会了HTML知识。
所有计算机语言的学习都要从基础开始，《PHP入门视频教程之一周学会PHP》不仅是PHP的基础部分更主要的是PHP语言的核心技术，是学习PHP必须掌握的内容，任何PHP项目的实现都离不开这部分的内容，通...
本课以最新版ThinkPHP5.0.10为基础进行开发，全程实录一个完整企业点，从后台到前台，从控制器到路由的全套完整教程，不论是你是新人，还是有一定开发经验的程序员，都可以从中学到实用的知识~~
ThinkPHP是一个快速、开源的轻量级国产PHP开发框架，是业内最流行的PHP框架之一。本课程以博客系统为例，讲述如何使用TP实战开发，从中学习Thinkphp的实践应用。模版下载地址：http:/...
本课程是php实战开发课程，以爱奇艺电影网站为蓝本从零开发一个自己的网站。目的是让大家了解真实项目的架构及开发过程
本课以一个极简的PHP开发框架为案例,向您展示了一个PHP框架应该具有的基本功能，以及具体的实现方法，让您快速对PHP开发框架的底层实现有一个清楚的认识,为以后学习其实的开发框架打下坚实的基础。
javascript是运行在浏览器上的脚本语言，连续多年，被评为全球最受欢迎的编程语言。是前端开发必备三大法器中，最具杀伤力。如果前端开发是降龙十八掌，好么javascript就是第18掌：亢龙有悔。...
本站9月直播课已经结束,本套教程是直播实录,没有报上名或者漏听学员福利来了，赶紧看看吧，说不定这里就有你的菜
轻松明快，简洁生动，让你快速走入HTML5的世界，体会语义化开发的魅力
JavaScript能够称得上是史上使用最广泛的编程语言，也是前端开发必须掌握的三技能之一：描述网页内容的HTML、描述网页样式的CSS以及描述网页行为的JavaScript。本章节将帮助大家迅速掌握...
Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。为所有开发者、所有应用场景而设计,它让前端开发更快速、简单，所有开发者都能快速上手...
《php用户注册登录系统》主要介绍网站的登录注册功能,我们会从最简单的实现登录注册功能开始，增加验证码，cookie验证等，丰富网站的登录注册功能
《php.cn独孤九贱（2）－css视频教程》课程特色：php中文网原创幽默段子系列课程，以恶搞，段子为主题风格的php视频教程！轻松的教学风格，简短的教学模式，让同学们在不知不觉中，学会了CSS知识...
《PHP学生管理系统视频教程》主要给大家讲解了HTML，PHP，MySQL之间的相互协作，实现动态的网页显示和获取数据.
jQuery是一个快速、简洁的JavaScript框架。设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的...
《弹指间学会HTML视频教程》从最基本的概念开始讲起，步步深入，带领大家学习HTML,了解各种常用标签的意义以及基本用法，学习HTML知识为以后的学习打下基础
《最新微信小程序开发视频教程》本节课程是由微趋道录制，讲述了如何申请一个微信小程序，以及开发中需要使用哪些工具，和需要注意哪些等。
全栈工程师
文章总浏览数