首页 >web前端 >js教程 > 正文

javascript中input怎么用

原创2021-04-27 09:03:0301182

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中文网最新课程二维码

声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理

  • 相关标签:javascript
  • 相关文章

    相关视频


    网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论
  • 专题推荐

    作者信息

    藏色散人

    好好学习天天向上!

    最近文章
    javascript bom 有什么用442
    javascript是什么端145
    JavaScript中new是什么意思622
    推荐视频教程
  • JavaScript标准参考手册JavaScript标准参考手册
  • JavaScript函数与闭包JavaScript函数与闭包
  • JavaScript对象与常用设计模式JavaScript对象与常用设计模式
  • JavaScript 经典案例JavaScript 经典案例
  • 视频教程分类