如何实现点击文本框清除其中文本

如何实现点击文本框清除其中文本:

此种效果经常用在搜索框中,默认状态下搜索框中有提示语言,当点击搜索框时会清除其中的文本,下面就来简单介绍一下如何实现此种效果。尽管此效果没有用到CSS代码,因为代码比较常用,所以在这里也介绍一下。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.51texiao.cn/" />
<title>蚂蚁部落</title>
<script type="text/javascript">
window.onload=function(){
  var txt=document.getElementById("txt");
  txt.onclick=function(){this.value=‘‘}
  txt.onblur=function(){this.value=‘请输入搜索内容!‘}
}
</script>
</head> 
<body> 
<input type="text" name="mytest" id="txt" value="请输入搜索内容!" />
</body> 
</html>

原文地址是:http://www.51texiao.cn/div_cssjiaocheng/2015/0519/1885.html

最为原始地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=4693

时间: 2024-08-07 15:07:45

如何实现点击文本框清除其中文本的相关文章

点击文本框清除默认文本离开再恢复

点击文本框清除默认文本离开再恢复:很多网站的需要填写的文本框在默认状态下都会给出一个默认的提示语言,当鼠标点击此文本框的时候能够将里面的默认文本清除,当删除输入的文本且焦点离开文本框的时候再将默认的文本写入文本框.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://

jQuery实现点击文本框清除内容代码实例

jQuery实现点击文本框清除内容代码实例:本章节介绍一下文本框最简单的一个人性化措施,就是点击文本框的时候能够删除里面的提示文本.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title&g

jqgrid 表格中筛选条件的多选下拉,树形下拉 ;文本框清除插件;高级查询多条件动态筛选插件

/** * @@desc 文本框清除按钮,如果isAutoWrap为false当前文本框父级必须是relative定位,boostrap参考input-group * @@author bear.LEE <571115139#qq.com> * @@since 2018-08-21 **/ ; (function ($) { $.fn.extend({ addClearBtn: function (options, $o) { var deft = { symbolClass: "f

JS动态生成Input文本框 并获取文本框值

<!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= "Conte

jQuery实现textarea文本框带有半透明文本提示效果

jQuery实现textarea文本框带有半透明文本提示效果:textarea文本框一般用于编辑大段的文本,比如编辑器或者简单的留言回复之类的功能,有的在textarea文本框的有默认的提示语言,下面就介绍一下如何使用jQuery实现此功能.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content

各种各样的文本框滚动栏样式代码 滚动栏样式 文本框样式(文本框样式大全)

<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-face-color: #FFFFFF; scrollbar-shadow-color: #885C10; scrollbar-highlight-color: #F8ECD8; scrollbar-3dlight-color: #885C10; scrollbar-darkshadow-color:

asp.net-水印文本框/字符过滤文本框

要事先下载AjaxControlToolkit解压后拉入工具箱,如图: 水印和过滤扩展程序的属性如下: .master代码如下: <%@ Master Language="VB" CodeFile="0_MST_ASPNET12.master.vb" Inherits="_0_MST_ASPNET12" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transition

iOS_book 02 - 基本交互(约束、视图控制器、基本控件:按钮、文本框、分段控件、开关、标签、图像控件)

实现基本交互 MVC模式 Cocoa Touch 设计者们采用MVC(Model-View-Controller, 模型 - 视图 - 控制器)模式作为指导原则. MVC 模式把代码功能划分为3个不同的类别. 模型: 保存应用程序数据的类. 视图:包括窗口.控件以及其他一些用户可以看到并能与之交互的元素. 控制器:把模型和视图绑定在一起的代码,包括处理用户输入的应用程序逻辑. MVC的目标最大限度地分离这三类代码.MVC可以帮助确保代码的最大可重用性. 控制器组件通常有应用程序的具体类组成.控制

文本框的onchange事件,如何兼容各大浏览器

在项目中经常会遇到对用户输入的数据进行实时校验,而不是等文本框失去焦点或用户手动点击校验. 首先分析下在哪些情况下文本框会产生change事件. 1.用户通过键盘入正常字符时: 2.用户通过键盘输入非正常字符时 ctrl+v ctrl+x ctrl+z delete Backspace 等操作时: 3.用户通过鼠标进行粘贴.剪切.撤消等操作时: <body> <input id="text1" type="text"/> <div id