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 相关文章推荐
基于Jquery的回车成tab焦点切换效果代码(Enter To Tab )
Nov 14 Javascript
jQuery 获取URL的GET参数值的小例子
Apr 18 Javascript
jquery中的事件处理详细介绍
Jun 24 Javascript
jQuery Migrate 1.1.0 Released 注意事项
Jun 14 Javascript
JS简单循环遍历json数组的方法
Apr 22 Javascript
JSON与js对象序列化实例详解
Mar 16 Javascript
微信小程序中遇到的iOS兼容性问题小结
Nov 14 Javascript
Vue的编码技巧与规范使用详解
Aug 28 Javascript
uni-app如何实现增量更新功能
Jan 03 Javascript
jquery实现进度条状态展示
Mar 26 jQuery
详解JavaScript类型判断的四种方法
Oct 21 Javascript
vue+element ui实现锚点定位
Jun 29 Vue.js
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
114啦源码(114la)不能生成地方房产和地方报刊问题4级页面0字节的解决方法
2012/01/12 PHP
php堆排序实现原理与应用方法
2015/01/03 PHP
PHP配置把错误日志以邮件方式发送方法(Windows系统)
2015/06/23 PHP
解决php 处理 form 表单提交多个 name 属性值相同的 input 标签问题
2017/05/11 PHP
PHP实现UTF8二进制及明文字符串的转化功能示例
2017/11/20 PHP
laravel 事件/监听器实例代码
2019/04/12 PHP
php5.3/5.4/5.5/5.6/7常见新增特性汇总整理
2020/02/27 PHP
深入Javascript函数、递归与闭包(执行环境、变量对象与作用域链)使用详解
2013/05/08 Javascript
js setTimeout()函数介绍及应用以倒计时为例
2013/12/12 Javascript
浅谈javascript 迭代方法
2015/01/21 Javascript
JavaScript 面向对象与原型
2015/04/10 Javascript
使用jquery插件qrcode生成二维码
2015/10/22 Javascript
Javascript获取数组中的最大值和最小值的方法汇总
2016/01/01 Javascript
JavaScript仿商城实现图片广告轮播实例代码
2016/02/06 Javascript
分享JavaScript监听全部Ajax请求事件的方法
2016/08/28 Javascript
vue 自定义组件 v-model双向绑定、 父子组件同步通信的多种写法
2017/11/27 Javascript
layer弹出层全屏及关闭方法
2018/08/17 Javascript
微信头像地址失效踩坑记附带解决方案
2019/09/23 Javascript
原生js实现拖拽移动与缩放效果
2020/08/24 Javascript
用Python输出一个杨辉三角的例子
2014/06/13 Python
Python实现简单拆分PDF文件的方法
2015/07/30 Python
Python 旋转打印各种矩形的方法
2019/07/09 Python
python中的django是做什么的
2020/07/31 Python
Roots加拿大官网:加拿大休闲服饰品牌
2016/10/24 全球购物
学生发电厂实习自我鉴定
2013/09/22 职场文书
英文自荐信格式
2013/11/28 职场文书
《小石潭记》教学反思
2014/02/13 职场文书
大班上学期幼儿评语
2014/04/30 职场文书
护士长2014年终工作总结
2014/11/11 职场文书
观看建国大业观后感
2015/06/01 职场文书
2016大一新生入学教育心得体会
2016/01/23 职场文书
人民调解协议书
2016/03/21 职场文书
二手手机买卖合同范本(2019年版)
2019/10/28 职场文书
详解Go语言运用广度优先搜索走迷宫
2021/06/23 Python
浅析Redis Sentinel 与 Redis Cluster
2021/06/24 Redis
Mysql8.0递归查询的简单用法示例
2021/08/04 MySQL