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


Posted in Javascript onJuly 25, 2018

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

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>3water.com 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.3water.com/code/HtmlJsRun测试一下运行效果。

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

Javascript 相关文章推荐
javascript 静态对象和构造函数的使用和公私问题
Mar 02 Javascript
uploadify 3.0 详细使用说明
Jun 18 Javascript
jQuery中读取json文件示例代码
May 10 Javascript
最流行的Node.js精简型和全栈型开发框架介绍
Feb 26 Javascript
AngularJS+Node.js实现在线聊天室
Aug 28 Javascript
avalon js实现仿google plus图片多张拖动排序附源码下载
Sep 24 Javascript
Zero Clipboard实现浏览器复制到剪贴板的方法(多个复制按钮)
Mar 24 Javascript
原生JS实现图片懒加载(lazyload)实例
Jun 13 Javascript
解决canvas画布使用fillRect()时高度出现双倍效果的问题
Aug 03 Javascript
详解Node全局变量global模块
Sep 28 Javascript
javascript实现文件拖拽事件
Mar 29 Javascript
Vue实现移动端左右滑动效果的方法
Nov 27 Javascript
Bootstrap Fileinput 4.4.7文件上传实例详解
Jul 25 #Javascript
JavaScript简单实现关键字文本搜索高亮显示功能示例
Jul 25 #Javascript
微信小程序实现指定显示行数多余文字去掉用省略号代替
Jul 25 #Javascript
JavaScript对象的浅拷贝与深拷贝实例分析
Jul 25 #Javascript
Vue与Node.js通过socket.io通信的示例代码
Jul 25 #Javascript
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
Jul 25 #jQuery
详解Vue源码学习之callHook钩子函数
Jul 25 #Javascript
You might like
Smarty最简单实现列表奇偶变色的方法
2015/07/01 PHP
Laravel框架实现的记录SQL日志功能示例
2018/06/19 PHP
用 JSON 处理缓存
2007/04/27 Javascript
js 纯数字不重复排列的另类方法
2010/07/17 Javascript
jQuery 关于伪类选择符的使用说明
2013/04/24 Javascript
javascript中的window.location.search方法简介
2013/09/02 Javascript
使用jQuery实现input数值增量和减量的方法
2015/01/24 Javascript
jQuery DOM插入节点操作指南
2015/03/03 Javascript
jquery自定义表单验证插件
2016/10/12 Javascript
JS/jQuery判断DOM节点是否存在的简单方法
2016/11/24 Javascript
Vue.js第三天学习笔记(计算属性computed)
2016/12/01 Javascript
详解Vue.js——60分钟组件快速入门(上篇)
2016/12/05 Javascript
JavaScript使用readAsDataUrl方法预览图片
2017/05/10 Javascript
你点的 ES6一些小技巧,请查收
2018/04/25 Javascript
用Node提供静态文件服务的方法
2018/07/06 Javascript
vue在手机中通过本机IP地址访问webApp的方法
2018/08/15 Javascript
Nuxt升级2.0.0时出现的问题(小结)
2018/10/08 Javascript
Vue中的循环及修改差值表达式的方法
2019/08/29 Javascript
[01:04:31]DOTA2-DPC中国联赛定级赛 iG vs Magma BO3第二场 1月8日
2021/03/11 DOTA
Python中的文件和目录操作实现代码
2011/03/13 Python
Python编写简单的HTML页面合并脚本
2016/07/11 Python
Python实现的个人所得税计算器示例
2018/06/01 Python
用python建立两个Y轴的XY曲线图方法
2019/07/08 Python
使用Python实现画一个中国地图
2019/11/23 Python
使用Python实现Wake On Lan远程开机功能
2020/01/22 Python
python实现批处理文件
2020/07/28 Python
个人找工作求职简历的自我评价
2013/10/20 职场文书
庆八一活动方案
2014/01/25 职场文书
计算机科学技术自荐信
2014/06/12 职场文书
民族精神月活动总结
2014/08/28 职场文书
2014入党积极分子批评与自我批评思想汇报
2014/09/20 职场文书
付款证明模板
2015/06/19 职场文书
信用卡工资证明范本
2015/06/19 职场文书
致创业您:正能量激励人心句子(48条)
2019/08/15 职场文书
CSS实现切角+边框+投影+内容背景色渐变效果
2021/11/01 HTML / CSS
人民币符号
2022/02/17 杂记