javascript给input设置默认提示语例子

例子

 代码如下 复制代码

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="text" class="input" onfocus="myFocus(this)" onblur="myBlur(this)" value="11">
<input type="text" class="input" onfocus="myFocus(this)" onblur="myBlur(this)" value="22">
</body>
</html>
<script>
function myFocus(element){
if (element.value == element.defaultValue){
   element.focus();
   element.value = '';
}
    }
    function myBlur(element){
    if (element.value == ''){
  element.blur();
  element.value = element.defaultValue;
    }
}
</script>

补充：

onFocus事件就是当光标落在文本框中时发生的事件。

onBlur事件是光标失去焦点时发生的事件。

支持该事件的js对象

button, checkbox, fileUpload, layer, frame, password, radio, reset, select, submit,
text, textarea, window

当然我们也可以使用jquery来实现了，方法更简单并且代码也简洁许多少。

 代码如下 复制代码

$("#id").focus(function(){
             ……
});

与

$("input").blur(function(){
  $("input").css("background-color","#D6D6FF");
});

例子

 代码如下 复制代码

html

<input name="q" type="text" class="you" id="xf_search"  value="11111">

jquery代码

<script type="text/javascript">
(function (){ $("#xf_search").focus(function (){(this.value=='11111')?this.value='':false}); $("#xf_search").blur(function (){(this.value=='')?this.value='11111':false}); }());
</script>

方法可以实现我们不在html表单上加js代码这个从优化方面来讲是有很大的提升哦

时间： 2024-08-01 21:19:31

javascript给input设置默认提示语例子的相关文章

Javascript获取统一管理的提示语(message)_javascript技巧

  项目开发中,各个页面,各个业务操作都会使用提示语.面对这么多message,更好的方式是统一管理这些消息.这样在做国际化的时候进行统一处理也变的方便. 推荐方案使用数据库来管理所有提示语,在项目启动的时候将所有提示语加载到内存或缓存存储. 对于Java中如何实现,没有什么可说的,很简单.那么我们如何在Javascript中使用我们这些提示语呢,下面进行了简单封装,思路清晰,使用简单,供大家参考. 1.创建message.jsp,代码如下: <%-- <%@ page import=&quo

Javascript:为input设置readOnly属性

 本篇文章主要是对Javascript中为input设置readOnly属性的示例代码进行了介绍.需要的朋友可以过来参考下,希望对大家有所帮助 1.js为<input>设置readOnly属性         <textarea name="content" id="content" cols="27" rows="6"></textarea>         var cObj = docu

Javascript:为input设置readOnly属性(示例讲解)_javascript技巧

1.js为<input>设置readOnly属性       <textarea name="content" id="content" cols="27" rows="6"></textarea>       var cObj = document.getElementById("content");       cObj.setAttribute("read

使用jQuery给input标签设置默认值_jquery

由于项目需求,简单地写了一个input默认值设置,实现给.form中所有的input设置默认值的方法. <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>input默认值设置</title> <script type="text/javascript" src="http://apps.bdimg.com/li

网站input及textarea提示文字的样式及功能模块总结

        coding表单的过程中,经常会遇到input及textarea的部分,而这两种标签几乎都伴随着框内提示文字的情况,如果把每处需要做提示的地方都做一套样式及脚本的话,又不利于网站的代码共用,并且调整起来也十分费力,所以今天在这儿把这部分提出来,以供 weber们参考,当然如有更好方法的话,也欢迎意见及吐槽!         废话不多,上代码. <form class="templateForm"> <input type="text"

JavaScript如何实现在文本框(密码框)输入提示语_javascript技巧

有时候我们需要在登陆表单有一些提示语言,比如"请输入用户名"和"请输入密码"等语言,至于用户名好说,但是在密码框中出现"请输入密码"这样的语言就有点麻烦了,因为在密码框输入的内容不会以明码显示.如果动态的控制type属性的话就有兼容性问题,如果input已经存在于页面中的话,在IE8和IE8以下浏览器中,type属性是只读的.所以就得想其他办法,代码如下: <!DOCTYPE html> <html> <head&g

常用input文本框内容自动垂直居中并默认提示文字单击为空

三个功能: 1.内容自动垂直居中 2.默认提示文字显示灰色 3.单击后变为空   复制代码 代码如下: <input type="text" name="wd1" id="qy_1" maxlength="100" style="color:gray;width:199px;height:30px;line-height:30px;" autocomplete="off" valu

如何为win7电脑设置个性化开机提示语？

  之前,就有不少朋友提到,老是使用win7电脑,每次开机都是一样的声音,一样的画面,一样的文字,长久下来都有了视觉疲劳了,针对大家的牢骚,小编也是竭尽全力的为大家解决.之前就有文章已经介绍过如何对win7 64位旗舰版的开机画面和开机声音进行设置,打造个性化的win7系统,现在看来,就只剩下开机的文字没有介绍到了.今天,小编就和大家一起分享一下,如何设置win7电脑开机提示语吧! 1.同时按下win+r,打开电脑的运行窗口,然后在打开后的方框中输入secpol.msc并单击回车. 2.这样,电

举例说明如何为JavaScript的方法参数设置默认值_基础知识

你是否遇到过这样的情况,写了个function,无参数.   function showUserInfo(){ alert("你好!我是小明."); } function showUserInfo(){ alert("你好!我是小明."); } 调用:   showUserInfo(); showUserInfo(); 后来,发现其他地方也需要这个function,但是有变量值已经在function里面写死了,怎么办?加个参数吧.   function showUs