• 技术文章 >web前端 >js教程

    javascript中input怎么用

    藏色散人藏色散人2021-04-27 09:03:03原创1003

    javascript中input的用法:首先创建一个HTML示例文件;然后在body中创建一个form表单并通过input标签规定一个输入字段;最后在js代码中输入表单控件元素对象方法即可。

    本文操作环境:windows7系统、javascript1.8.5版、Dell G3电脑。

    JavaScript中input常用方法

    表单对象常用事件:
    onfocus:在表单元素收到输入焦点时触发;
    onblur:在表单元素失去输入焦点时触发。
    如:文本框失去焦点时,以下代码将调用myfun()函数。

    表单控件元素对象常用方法
    blur()
    让光标离开当前元素

    focus()
    让光标落到当前元素上

    select()
    用于种类为text,textarea,password的元素,选择用户输入的内容

    click()
    模仿鼠标单击当前元素

    效果展示
    在这里插入图片描述
    代码实现

    <!DOCTYPE html><html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	</head>
    	<body>
    		<p id="info">
    			<h2>填写相关信息</h2>
    			<form action="" method="post">
    				<input type="text" name="name" id="name" value="姓名" />
    				<br />
    				<input type="text" name="contact" id="contact" value="QQ或者电话" />
    			</form>
    		</p>
    		<script type="text/javascript">
    			window.onload = function() {
    				var inname = document.getElementsByTagName("input");
    				for (i = 0; i < inname.length; i++) {
    					//使用匿名函数
    					inname[i].onmouseover = function() {
    						this.focus();
    					}
    					inname[i].onfocus = function() {
    						this.select();
    					}
    				}
    			}
    		</script>
    	</body></html>

    【推荐学习:javascript高级教程

    以上就是javascript中input怎么用的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:javascript
    上一篇:10个开发者经常问的JavaScript面试题(附答案解析) 下一篇:为什么电脑没有javascript
    线上培训班

    相关文章推荐

    • javascript方法(函数)的定义方式有哪些• javascript字符串中指定字符怎么删除• javascript怎么设置元素文本内容• javascript怎么设置元素属性• 10个开发者经常问的JavaScript面试题(附答案解析)

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网