浅谈JavaScript实现文本框的placeholder

向右看齐 2022-06-17 03:16 226阅读 0赞

代码：

<!doctype html>  
    <html>  
        <head>    
        </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) {
    					setCursorPosition(this, 0);
    				}
    			};
    			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>

发表评论取消回复

表情：

评论列表（有 0 条评论，226人围观）

还没有评论，来说两句吧...

相关阅读

相关 JavaScript变量浅谈

![19595c18415ef69dd29ec19586badb8a.jpeg][] 转自：[微点阅读][Link 1] [https://www.weidianyuedu.

深藏阁楼爱情的钟/ 2024年03月30日 17:09/ 0 赞/ 95 阅读

相关 JavaScript Date浅谈

简介：date方法可以用于处理日期和时间问题。【显示此时时间，如21:38:26】 <script> function add(e){

我就是我/ 2023年10月05日 13:04/ 0 赞/ 25 阅读

相关浅谈JavaScript节流

JavaScript节流应用相当广泛，一般我们可能会直接用某些函数库的实现，比如lodash、underscore 等。下面我们具体探究下节流的核心节流 > 先执行一

女爷i/ 2022年08月30日 12:57/ 0 赞/ 237 阅读

相关浅谈JavaScript中的事件

事件在javascript中是响应用户的一种基本操作,本文列举了两种javascript中的事件模型及其绑定的方式,希望能对你的学习带来一点帮助.这些都是非常基础的但或许其中有

╰+哭是因爲堅強的太久メ/ 2022年08月23日 14:55/ 0 赞/ 232 阅读

相关浅谈javascript面向对象

我们常用的两种编程模式 POP–面向过程编程(Process-oriented programming) 面向过程编程是以功能为中心来进行思考和组织的一种编程方法，

古城微笑少年丶/ 2022年07月16日 20:42/ 0 赞/ 290 阅读

相关浅谈原生JavaScript实现remove()和recover()

利用原生JavaScript实现： 1、remove(selectors)删除指定的一个或一组元素。 2、recover(selectors)恢复刚才删除的元素。

女爷i/ 2022年06月17日 11:51/ 0 赞/ 176 阅读

相关浅谈JavaScript表单

浅谈表单脚本一、表单的基础知识取得<form>元素引用的方式： 1) 为<form>元素添加id，然后通过getElementById()方法来访问； va

女爷i/ 2022年06月17日 05:12/ 0 赞/ 307 阅读

相关浅谈JavaScript实现文本框的placeholder

代码： <!doctype html> <html> <head> </head> <bo

向右看齐/ 2022年06月17日 03:16/ 0 赞/ 227 阅读

相关浅谈 JavaScript array.sort(compare()) 实现原理.

JavaScript array.sort(compare()) 的实现原理是什么？先看下' 2015-ECMAScript-262语言规范 '的解释：The sort i

超、凢脫俗/ 2022年06月07日 01:40/ 0 赞/ 225 阅读

相关设置文本框的placeholder的样式

Input:-webkit-input-placeholder{ ...Style } textarea:-webkit-text

超、凢脫俗/ 2022年05月13日 05:04/ 0 赞/ 285 阅读