如何让文本框内的提示信息在激活文本框时清空
解决思路:
当需要填写的文本框很多时,在每个文本框内写上提示信息是个不错的办法,但这样一来用户在填写该项时必须先把提示文本删掉,非常不方便。所以应该让文本框更人性化一点,在focus时检查当前值是否为文本框的默认值,是则清空,否则保持不变,而在blur时检查文本框的内容是否为空,是则重置为默认值,否则保持不变。
具体步骤:
1.设置文本框的默认值或提示信息。
<input value="填写您的昵称">
<input value="填写您的生日(1900-01-01)">
2.判断、清空文本框内容的函数。
function cls(){
with(event.srcElement)
if(value==defaultValue) value=""
}
3.判断、还原文本框内容的函数。
function res(){
with(event.srcElement)
if(value=="") value=defaultValue
}
4.给文本框添加触发事件onfocus和onblur,调用函数处理。完整代码:
<script>
function cls(){
//捕获触发事件的对象,并设置为以下语句的默认对象
with(event.srcElement)
//如果当前值为默认值,则清空
if(value==defaultValue) value=""
}
function res(){
//捕获触发事件的对象,并设置为以下语句的默认对象
with(event.srcElement)
//如果当前值为空,则重置为默认值
if(value=="") value=defaultValue
}
</script>
<input value="填写您的昵称" >
<input value="填写您的生日(1900-01-01)"
>
注意:本例的方法对大部分表单控件都有效,比如多行文本框。
特别提示
运行完整代码,在鼠标第一次单击文本框时该文本框内容将被清空,在文本框外单击时文本框内容将还原回默认值。如果改变了文本框的值,将不再有任何变化。图1.4.28为代码运行时的初始效果,图1.4.29为鼠标单击第二个文本框后的效果。 特别说明
本例主要是对象的defaultValue属性和onfocus、onblur事件应用。
defaultValue 设置或获取对象的初始内容。
onblur 在对象失去输入焦点时触发。
onfocus 当对象获得焦点时触发。
-
如何让文本框内的提示信息在激活文本框时清空
2019-06-27 03:01:25如何让文本框内的提示信息在激活文本框时清空 解决思路: 当需要填写的文本框很多时,在每个文本框内写上提示信息是个不错的办法,但这样一来用户在填写该项时必须先把提示文本删掉,非常不方便。所以应该让...转载于:https://www.cnblogs.com/hubcarl/archive/2009/03/15/1412717.html
-
清空激活文本框内的提示信息
2009-05-28 17:45:25用JavaScript实现,在表单的文本框中添加提示信息有助于理解表单的内容和目的。 -
文本框获得焦点后文本框内的提示文本消失 失去焦点后如果没有输入再显示提示
2012-02-05 09:31:57this.className='huise'和this.className='heise' 是指当文本框内是提示文字时显示的灰色,如果是关键字的话改为正常的黑色 这是这两个样式: .huise{ color:#999999;} .heise{ color:#000000;}<input type="text" class="huise" name="txtSearchValue" id="txtSearchValue" value="请输入关键字" οnfοcus="if(this.value=='请输入关键字){this.value=''; this.className='heise';}" οnblur="if(this.value=='') {this.value='请输入关键字'; this.className='huise'}" style="font-size:12px;"/>
this.className='huise'和this.className='heise' 是指当文本框内是提示文字时显示的灰色,如果是关键字的话改为正常的黑色
这是这两个样式:
.huise{ color:#999999;}
.heise{ color:#000000;} -
让文本框内的提示信息在激活文本框时清空
2012-03-13 15:27:06当页面需要填写的多个文本框时,如果一个一个去写提示验证信息,感觉很繁琐。所有这里有个方法,就是利用focus 与 blur ,在focus时检查当前值是否为文本框的默认值,是则清空,否则保持不变,而在blur时检查...过程:
当页面需要填写的多个文本框时,如果一个一个去写提示验证信息,感觉很繁琐。所有这里有个方法,就是利用focus 与 blur ,在focus时检查当前值是否为文本框的默认值,是则清空,否则保持不变,而在blur时检查文本框的内容是否为空,是则重置为默认值,否则保持不变。
<script type ="text/javascript" language ="javascript" >
function clstest(){
with(event.srcElement)
if(value==defaultValue) value=""
}
function restest(){
with(event.srcElement)
if(value=="") value=defaultValue
}
<input type ="text" value ="--在此输入信息--" οnfοcus="clstest()" οnblur="restest()" runat ="server" name ="tim" id ="time">
</script><input value="填写你的姓名"
οnfοcus="clstest()" οnblur="restest()">1.只能输入数字或小数:
<asp:textbox id="TextBox1" οnkeyup="if(isNaN(value))execCommand('undo')" runat="server"Width="80px" onafterpaste="if(isNaN(value))execCommand('undo')"></asp:textbox>
2.只能输入数字:
<asp:textbox class="Text"οnkeypress="if (event.keyCode < 48 || event.keyCode >57) event.returnValue = false;"
id="txtY_Revenue" style="TEXT-ALIGN: right" runat="server" Width="90%" MaxLength="12">
</asp:textbox>
-
文本框获得焦点后文本框内的提示文本消失 失去焦点后如果没有输入再显示提示 转...
2011-07-28 00:32:00是指当文本框内是提示文字时显示的灰色,如果是关键字的话改为正常的黑色 这是这两个样式: .huise{ color:#999999;} .heise{ color:#000000;} " 转载于:..."
<input type="text" class="huise" name="txtSearchValue" id="txtSearchValue" value="请输入关键字" οnfοcus="if(this.value=='请输入关键字){this.value=''; this.className='heise';}" οnblur="if(this.value=='') {this.value='请输入关键字'; this.className='huise'}" style="font-size:12px;"/>
this.className='huise'和this.className='heise' 是指当文本框内是提示文字时显示的灰色,如果是关键字的话改为正常的黑色
这是这两个样式:
.huise{ color:#999999;}
.heise{ color:#000000;}"
转载于:https://www.cnblogs.com/ndxsdhy/archive/2011/07/28/2119044.html
-
关于H5的新特性placeholder,在文本框内给出提示信息,获得焦点时消失,使用时IDEA给出黄色警告问题
2020-12-28 16:37:51可以在文本框内给出用户提示信息,当点击文本框获得焦点时,提示信息消失; <input type="text" name="userName" placeholder="请输入用户名" /> 出现黄色警告的原因 首先要知道placeholder属性是HTML5... -
【python】tkinter 删除Text文本框内的最后一行
2020-04-23 14:43:00想达到一个进度提示,需要在同一行中刷新显示进度 例如: 可以通过以下方式实现: for index in range(0, loopTimes): # other code if index > 0: self.log_text.delete("%s-1l"%INSERT, INSERT) self.... -
kindeditor成功上传图片后,在富文本框内无法正常显示
2017-02-28 06:33:11//上传报错的提示方法 private String getError(String message) { JSONObject obj = new JSONObject(); obj.put("error", 1); obj.put("message", message); return obj.toJSONString(); } } ``` ... -
IOS 编辑框焦点失去与获取时提示文本的的动画
2019-04-25 20:07:38内部使用一个UILabel与UITextFiled,其中UILabel 使用动画控制缩放与位移,在UITextFiled 获取焦点时启动动画,进行UILabel 缩放并往上移,失去焦点且文本内容为空时再使用动画控制UILabel恢复到原来的状态。... -
Echarts实战案例代码(27):地理坐标图视觉引导线及富文本提示框的案例
2020-08-09 10:23:08多组数据在文本内如何使用 formatter回调函数; 区域鼠标事件变化文本框样式; geoJSON数据 调用geoJSON,设置区域中心点坐标和显示文本框位置的经纬度坐标; myChart.showLoading(); var uploadedDataURL = "/... -
VisualAssistx自动提示代码候选框光标上下移动时,文本编辑器中的光标也会跟着移动
2019-12-06 17:18:22在VS2017使用一段时间VA后,突然出现在自动补全列表中键盘上下选择的时候,代码编辑那边的光标也会跟着移动,并且在回车选择后会覆盖掉移动区间内的所有代码。 VA版本是2210,重装VA 重装VS都试过无法解决。 -
js实现跟随鼠标移动的提示框
2012-10-26 09:18:48js实现文本框内跟随鼠标移动的提示框,即当鼠标在指定的文本框内时,弹出一个提示,根据鼠标移动显示在鼠标右下角,鼠标离开文本框时提示消失,效果如下: 首先需要定义一个div块,弹出的提示实际上就是div块... -
【Unity笔记】提示框ToolTips大小自适应,及其闪烁的问题
2017-08-03 09:28:00需求:制作了一个提示框,当鼠标移入背包格子内,显示提示框,且提示框位置跟随鼠标移动。当鼠标移出背包格子,隐藏提示框。 制作提示框ToolTips 因为提示框的大小要求随着显示的文本内容长度而自动大小适应,所以用... -
input框选中时如何不出灰框_jQuery设置input文本框内灰色提示效果
2021-01-12 07:47:04一、jquery实现input文本框内灰色提示文本效果复制代码 代码示例:input testfunction inputTipText(){$("input[class*=grayTips]") //所有样式名中含有grayTips的input... //默认的提示性文本$(this).css({"color":"... -
java swing tooltips_【Unity笔记】提示框ToolTips大小自适应,及其闪烁的问题
2021-02-26 11:40:33制作提示框ToolTips因为提示框的大小要求随着显示的文本内容长度而自动大小适应,所以用一个Text控件显示提示框的文本内容,并挂上Content Size Fitter组件。因为提示框不仅只是一个Text文本,还需要有一个Image做... -
EditView 文本提示信息
2013-08-07 16:59:59对于一个用户友好的输入界面而言,接受用户输入的文本框内默认会提示用户如何输入,当用户把焦点切换到输入框时,输入框自动选中其中已输入的内容,避免用户删除已有内容;当用户把焦点切换到只接受电话号码的输入框... -
Chrome删除已存储的表单提示文本/删除自动弹出的下拉框提示
2019-09-28 14:59:31在一些input输入框内输入内容时,经常会出现这种情况, 可将鼠标移动到一条内容上,按shift+del组合键进行删除 -
php 搜索框提示(自动完成)实例代码
2021-01-21 16:09:50在search.html页面中,用户在搜索框内输入“j”时,使用javascript获取搜索框的文本内容,到数据库中查找相关的内容并返回,再使用javascript将服务器返回的结果显示在搜索框下面的提示框内,供用户参考选择。... -
jquery+php实现搜索框自动提示
2020-12-11 21:30:37今天突然想给本站做个搜索页面,这样用户可以通过搜索来找到自己喜欢的内容,也避免了在海量信息中手动查找...在search.html页面中,用户在搜索框内输入“j”时,使用javascript获取搜索框的文本内容,到数据库中查找相 -
JQuery开发6-文本框字数限制和提示文本的影藏与显示
2016-05-30 16:23:14在网页中,为例提高用户体验,往往会在用户使用文本框时提示文本框最大限定字数以及当用户输入后,提示还可以输入的字符数...2、文本框内会出现默认灰色的提示文本,当文本框获得焦点时,比如用鼠标点击该文本框,... -
unity 文本输入框_Unity3D 之UGUI 文本框和编辑框
2021-02-11 13:45:28标签:这里来讲解一下unity3D自带的UI功能,自带的UI也叫UGUI功能非常的强大,比起NGUI,更加的灵活,让用户能够更加容易的去...然后是输入框InputField游戏对象下面包括两个元素,一个是提示内容,一得到输入的内... -
超详细——前端的三种弹出提示框解读
2020-12-17 11:24:44alert()方法是这三种对话框中最容易使用的一种,她可以用来简单而明了地将alert()括号内的文本信息显示在对话框中,我们将它称为警示对话框,要显示的信息放置在括号内,该对话框上包含一个"确认"按钮,用户阅读完所... -
java如何设置文本框提示_[Java教程]一个友好的文本框内显示提示语 jquery 插件
2021-03-17 19:17:50[Java教程]一个友好的文本框内显示提示语 jquery 插件0 2014-08-08 18:01:25插件实现文本框内默认显示提示语,当文本框获得焦点时提示语消失。 如果没有输入或输入为空则失去焦点时提示语再次出现。同时它的使用非常... -
文本框下拉提示效果(模拟百度效果提示框)
2013-08-01 14:23:03实现思想:当用户在文本框中输入时,可以利用ajax方式将文本框内内容传给后台的实现类,在实现类中经过处理后将产生的结果获取过来在前台呈现。具体操作可通过ajax将文本框的值通过ajax实现框架传递给系统后端获得... -
php mysql搜索框实例_php 搜索框提示(自动完成)实例代码
2021-01-27 12:07:09百度的搜索大家都在用,当用户输入文字...下面先主要讲解原理:在search.html页面中,用户在搜索框内输入“j”时,使用javascript获取搜索框的文本内容,到数据库中查找相关的内容并返回,再使用javascript将服务器... -
文本类控件(EditView 的介绍)
2016-03-04 09:18:30EditView的作用:用于在屏幕上显示文本输入框 Android的编辑框组件组件可以输入单行文本,多行文本,指定格式文本(密码,邮箱地址等) ...设置EditText为空时输入框内的提示信息。 android:gravity属性是对该vie -
vue里怎么实现文本溢出才显示title提示
2020-07-09 21:11:16最近ui提了一个优化问题,就是文本超出的时候才显示title提示? 方法一:结合el-tooltip编写公共组件 1、先编写一个公共组件TextOverTooltip.vue, 大致的实现思路:利鼠标移动到标签之上时,判断文字内容的宽度是否... -
JQuery提示框(带滚动条)
2014-12-19 15:58:23弹出框的高度随框内文本长度变化(文本长度变大,弹出框向上,下方向等速拉长) 3 .当弹出框的高度超过window高度的2/3时,弹出框的高度固定为window高度的2/3,弹出框以滚动条的形式显示多出的文本 演示代码: // ... -
H5手机搜索框的简单实现
2020-04-16 08:41:44本文系原创,转载请注明出处...当文本框内输入文本时,提示语隐藏,同时显示清空文本按钮;当没有输入时显示提示语,同时隐藏清空按钮。 一. HTML input 标签 placeholder属性 Placeholder属性具有显示提示语的性质...