html中input提示文字样式修改的示例代码_HTML/Xhtml_网页制作

来源:脚本之家  责任编辑:小易  

1、使用onfocus事件检查当前值,如果是默认值来,就将value属性置空.如:type="textvalue="请输入自内容onfocus="javascript:if(this.value='请输入内容')this.value='';2、id="emailtype="textplaceholder="这里输入文字size="22placeholder="这里输入文字input设置默认显2113示文字的两种方式:1.placeholder属性。在输5261入框为空的情况下会显4102示placeholder中的值。但是提交时不能直接取其值。2.value属性。在输入框加载的时候输1653入框中的值。提交时可直接获取www.zgxue.com防采集请勿采集本网。

在很多网站上我们都看到input输入框显示提示文字,让我们一起来看看如果在input输入框中显示提示文字。我们只需要在<input>标签里添加:placeholder="提示文字即可",那么如果要修改提示文字的样式呢?可以这样设置css样式:

html5 可以直接用 placeholder=\"请输入员工号 js的话 你需要多制作的一个标签,比如span,覆盖在输入框的上方 鼠标进入的时候显示这个span,离开的时候就隐藏,原理就是这样

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>input输入框提示文字</title><style>/*修改提示文字的颜色*/input::-webkit-input-placeholder { /* WebKit browsers */ color: red; }input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: red; }input::-moz-placeholder { /* Mozilla Firefox 19+ */ color: red; }input:-ms-input-placeholder { /* Internet Explorer 10+ */ color: red; }</style></head><body><input type="text" placeholder="请输入用户名" /></body></html>

可以设置一个隐藏域,用法和作用 都与input标签相同,只是不会显示出来. input type=\"hidden\"name=\"field_name\"value=\"value\"> value的值要自己写进去或者用脚本语言获取

修改后提示文字样式如下:

判断文本框的值是否为空,有值的情况就隐藏提示语,没有值就显示 if(thisVal!{ (this).siblings(\"span\").hide();}else{ (this).siblings(\"span\").show();} 聚焦型输入框验证 (this).focus(function(){

PS:下面看下HTML5里的input标签的required属性提示文字修改

在做表单提交时我们有时会遇到这样的需求,在用户没有输入必填信息点提交时提示文字需要改为我们想要的提示信息,那么可以在input里面增加这样的语句:

<input type="text" placeholder="您的姓名" required oninvalid="setCustomValidity('请输入您的姓名');" oninput="setCustomValidity('');" />

到此这篇关于html中input提示文字样式修改的文章就介绍到这了,更多相关html input 文字样式内容请搜索真格学网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持真格学网!

使用onfocus事件检查当前值,如果是默认值,就将value属性置空.如:请输入内容"onfocus="javascript:if(this.value='请输入内容')this.value='';单纯的文本框:(通常用用户名之类的)height:54px;font-size:18px;line-height:54px;value="请输入您的帐号"onFocus="if(value='请输入您的帐号'){value=''}"onBlur="if(value=''){value='请输入您的帐号'}">密码状态时 中上面的方法会显示不出字 而是默认的星号或者点 所以用下面的实现密码框默认有字 鼠标点击后默认字消失DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"html;charset=utf-8">无标题文档inputs{width:300px;margin:50px auto;border:solid 1px#090;}password{display:none;}请输入密码"/>window.onload=function(){var pwd=document.getElementByIdx_x("password");var pwd_text=document.getElementByIdx_x("password_text");pwd_text.onfocus=function(){pwd.style.display="inline;pwd_text.style.display="none;pwd.focus();}pwd.onblur=function(){if(pwd.value=null|pwd.value=""|pwd.value="请输入密码"){pwd.style.display="none;pwd_text.style.display="inline;}}}内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • html中input提示文字样式修改的示例代码
  • 详解html中表格table的行列合并问题解决
  • layui表格选中指定行的radio单选框并滚动到该行的实现代码
  • 利用div+css3实现一个背景渐变的button按钮的示例代码
  • quill编辑器插入自定义html记录的示例详解
  • html 实现tab切换的示例代码
  • html+css相对宽度和绝对宽度冲突时的div解决方法
  • html table实现复杂表头的示例代码
  • html的relative与absolute使用及区别详解
  • html页面展示json数据并格式化的方法
  • html中input文本框,初始里边有文字提示。当点击时,文字消失,怎么改?
  • html中input文本框,初始里边有文字提示,当点击时,文字消失,怎么设置?
  • HTML中用于显示文字的标签是什么,通过给定value值可以设置的
  • html里的input文本框怎样单行变多行
  • html里输入框和密码框的提示文字怎么弄?
  • html中让一段input有值标签不显示
  • html里输入框和密码框的提示文字怎么弄
  • html中怎么让文本框提示文字右对齐
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全主页网页制作html/xhtml文字样式inputquill编辑器插入自定义html记录的示例详解html页面展示json数据并格式化的方法html/xhtmlhtml5cssxml/xsltdreamweaver教程frontpage教程心得技巧iframe标签用法详解(属性、透明、自适应高度)16进制颜色代码(完全)40多个漂亮的网页表单设计实例定义input type=file 样式的方法html中让表单input等文本框为只读不可编辑的方法html中设置锚点定位的几种常见方法html 几种特别分割线特效 html iframe 用法总结收藏html 超级链接详细讲解网页嵌入百度地图和使用百度地图api自定义地图的详细html中input提示文字样式修改的示例代码详解html中表格table的行列合并问题解决layui表格选中指定行的radio单选框并滚动到该行的实现利用div+css3实现一个背景渐变的button按钮的示例代码quill编辑器插入自定义html记录的示例详解html 实现tab切换的示例代码html+css相对宽度和绝对宽度冲突时的div解决方法html table实现复杂表头的示例代码html的relative与absolute使用及区别详解html页面展示json数据并格式化的方法
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved