JavaScript实现的文本框placeholder提示文字功能示例

本文实例讲述了JavaScript实现的文本框placeholder提示文字功能。分享给大家供大家参考，具体如下：

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>www.jb51.net JS文本框placeholder提示</title>
</head>
<body>
  <input id="input" type="text" value="请输入关键词">
</body>
<script>
    window.onload = function() {
      var defaultValue = "请输入关键词";
      var input = document.getElementById("input");
      input.style.color = "grey";
      input.onfocus = function() {
        if (this.value == defaultValue) {
          input.value="";
          setCursorPosition(this, 0);
        }
      };
      input.onblur = function() {
        if (this.value == "") {
          this.value = defaultValue;
        }
      };
      input.onkeypress = function(e) {
        e = e || window.event;
        var key = e.charCode || e.keyCode || e.which;
        if (this.value == defaultValue) {
          this.value = "";
          this.style.color = "black";
        }
        if (this.value.length == 1 && key == 8) {
          this.value = defaultValue;
          this.style.color = "grey";
          setCursorPosition(this, 0);
        }
      };
    };
    function setCursorPosition(elem, index) {
      if (elem.setSelectionRange) {
        elem.focus();
        elem.setSelectionRange(index, index);
      }
      else if (elem.createTextRange) {
        var range = elem.createTextRange();
        range.collapse(true);
        range.moveEnd('character', index);
        range.moveStart('character', index);
        range.select();
      }
    }
</script>
</html>

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试一下运行效果。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript页面元素操作技巧总结》、《JavaScript操作DOM技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

赞 (0)

相关推荐

  • 基于JS实现html中placeholder属性提示文字效果示例

    基于JS实现html中placeholder属性提示文字效果示例

    本文实例讲述了基于JS实现html中placeholder属性提示文字效果.分享给大家供大家参考,具体如下: 如何通过js实现html的placeholder属性效果呢 我们需要这样做: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>www.jb51.net JS实现placeholder属性效果</title> <script>

  • js+css实现增加表单可用性之提示文字

    平常设计表单的时候,我们会加入一些提示文字,比如说在搜索框里,我们会提示"请输入关键字",并在搜索框得到焦点和失去焦点的时候适时的隐藏和显示,最常见的做法是利用value来设置: 复制代码 代码如下: <form id="search"> <input type="text" id="keyword" name="keyword" value="请输入关键字">

  • javascript 文本框水印/占位符(watermark/placeholder)实现方法

    Firefox/Chrome/Opera从某一版本开始已经支持这一特性,但ie系列即使是ie9也还不支持,所以需要通过javascript来兼容这些不支持placeholder特性的浏览器. 普遍的做法 现在普遍使用的做法是通过表单元素的onfocus/onblur事件来改变value值,如下: 复制代码 代码如下: <input type="text" id="text1" /> <script> var el = document.get

  • 让低版本浏览器支持input的placeholder属性(js方法)

    复制代码 代码如下: var doc = window.document, input = doc.createElement('input'); if( typeof input['placeholder'] == 'undefined' ) // 如果不支持placeholder属性 { $('input').each(function( ele ) { var me = $(this); var ph = me.attr('placeholder'); if( ph && !me.v

  • JS实现输入框提示文字点击时消失效果

    本文实例讲述了JS实现输入框提示文字点击时消失效果.分享给大家供大家参考,具体如下: 在网页登陆框里的输入框里常常会看到提示你输入什么内容的字样颜色比较淡的,这个就是"文本框点击时文字消失,失去焦点时文字出现"这个效果:这个效果用个JS就可以完成,这个效果是做网站的人必备的JS代码:自己会写JS的写写也快,不会写的就需要代码收集以作备用,用到的时候就方便多了. 下面就是这个效果实现用到的JS代码: <script language="JavaScript" t

  • js兼容的placeholder属性详解

    js兼容的placeholder属性详解

    作为一个.net后台开发的程序猿,博客里既然大多都是前端相关的博文.是不是该考虑换方向了,转前端开发得了 ... 小小吐槽一下,近期受该不该跳槽所困惑,我有选择困难症! 继续前端,这次说一下输入框 placeholder 这个属性. html5 的新属性,就是在输入框没输入值的时候,显示的提示文字(自己的理解),例如: 貌似很好用,但也只能在支持 html 的浏览器版本中显示,而对于不能支持的浏览器版本,让我这种极力追求完美的开发者来说是很不舒服的一件事. 上网找了很多资料,有很多大牛人都已经有

  • js显示文本框提示文字的方法

    本文实例讲述了js显示文本框提示文字的方法.分享给大家供大家参考.具体实现方法如下: <!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"> <

  • js模仿html5 placeholder适应于不支持的浏览器

    html5原生支持placeholder,对于不支持的浏览器(ie),可用js模拟实现. js代码 复制代码 代码如下: (function(){ //判断是否支持placeholder function isPlaceholer(){ var input = document.createElement('input'); return "placeholder" in input; } //不支持的代码 if(!isPlaceholer()){ //创建一个类 function P

  • JavaScript实现的文本框placeholder提示文字功能示例

    本文实例讲述了JavaScript实现的文本框placeholder提示文字功能.分享给大家供大家参考,具体如下: <!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>www.jb51.net JS文本框placeholder提示</titl

  • 密码框显示提示文字jquery示例

    复制代码 代码如下: <html> <head> <title>登录</title> <script type="text/javascript" src="./jquery-1.3.2.min.js"></script> <script> $(document).ready(function(){ $(".text_login").focus(function(

  • javascript文本框内输入文字倒计数的方法

    本文实例讲述了javascript文本框内输入文字倒计数的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>文本框内输入文字倒计数效果</title> <SCRIPT LANGUAGE="JavaScript"> <!-- Begin maxLen = 100; //定义用户可以输入的最多字数 function checkMaxInput(obj) { if

  • JavaScript实现统计文本框Textarea字数增强用户体验

    现在流行的Twitter等微博客网站,有一个很好的用户体验,就是在文本框中输入文字的时候,会自动统计输入的字符,并显示用户还能输入的字符,在限制了140个字的微博客中,这样的小提示可以很好的增强用户体验. 如果实现这种技术呢,我进行了一些研究,发现实现其实挺简单,几行代码就能完成输入字符统计功能,经过实际测试,其对文字的统计与Twitter等微博客的完全相同. 使用方法是,先增加一个span,用于显示剩余的字数,然后在Textarea中,加入一个onkeydown和onkeyup的事件,调用另一

  • js实现文本框中输入文字页面中div层同步获取文本框内容的方法

    本文实例讲述了js实现文本框中输入文字页面中div层同步获取文本框内容的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!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.o

  • 得到文本框选中的文字，动态插入文字的js代码

    复制代码 代码如下: <script language="javascript" src="js/settags.js"></script>  function AppTag(tagcode)  {   document.PostMessage.Message.value += tagcode;  } function InsertTag(tagbegin,tagend)  {   if ((document.selection)&&

  • javascript实现富文本框选中对齐的思路与代码

    javascript实现富文本框选中对齐的思路与代码

    目录 需求: 分析需求: 1如何获取选中的部分 * 2什么是块元素 3末梢元素(没有子节点的元素) 实现思路: 代码实现: 总结 需求: 一个可编辑(contenteditable=true)的div,对齐选中内容,左.中,右 ,其实质是:对选中的末梢节点,找到块属性的父元素,设置text-algin:center: MDN:text-align CSS属性定义行内内容(例如文字)如何相对它的块父元素对齐.text-align 并不控制块元素自己的对齐,只控制它的行内内容的对齐. 分析需求: 我

  • 如何删除文本框里的文字内容中段落之间多余的分行

    除文本框里的文字内容中段落之间多余的分行 细胞色素C: 唯一能溶于水的细胞色素,在复合物Ⅲ和Ⅳ之间传递电子. function clearSuperabundanceBlankLine() {k=textareaName.value rgexp=/\r\n\s*?\r\n/m while(rgexp.test(k))k=k.replace(rgexp,"\r\n") textareaName.value=k} 去除多余空行 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • JavaScript监听文本框回车事件并过滤文本框空格的方法

    本文实例讲述了JavaScript监听文本框回车事件并过滤文本框空格的方法.分享给大家供大家参考.具体如下: <script type="text/javascript" language="javascript"> var username = null; var password = null; //获取文本框 onload = function() { username = document.getElementById("txtUser

  • JavaScript实现将文本框的值插入指定位置的方法

    JavaScript实现将文本框的值插入指定位置的方法

    本文实例讲述了JavaScript实现将文本框的值插入指定位置的方法.分享给大家供大家参考.具体如下: 这里实现JavaScript将文本框的值插入当前面指定位置,这在一些表单提交场合或许我们都用到过,本代码段是将文本框的值写入到当前页的body区域内,如果你设置有其它的文本框,则可以值赋给这些文本框,可以让使用表单的用户免去输入的麻烦. 运行效果如下图所示: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional

随机推荐