当我们用鼠标经过输入框时，不用鼠标点击、亦不用右键全选，就可以得到文本框的焦点（选中文字）。另外，为了防止重复提交，当访客点击了提交以后，按钮变为灰色，实际代码：
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=GB2312" />
<title>更智能人性化的表单 - 烈火学院 Liehuo.Net</title>
<!-- 脚本部分 -->
<script type="text/javascript">
function $(str){ return(document.getElementById(str)); }
function check_submit(){
if($("txt_user_name").value==""){ alert("请填写用户名"); return(false); }
if($("txt_user_pass").value==""){ alert("请填写密码"); return(false); }
if($("txt_user_pass_confirm").value==""){ alert("请填写确认密码"); return(false); }
$("submit_button").disabled=true;
return(false);
}
function mover(){
event.srcElement.focus();
event.srcElement.select();
}
function mclick(){
if(event.srcElement.value=="[请输入用户名]")event.srcElement.value="";
}
function mblur(){
if(event.srcElement.value=="")event.srcElement.value="[请输入用户名]";
}
// 烈火網 liehuo.net 真诚的欢迎复制转载，因为互联网是复制出来的，我们拒绝恶意采集 ｌｉｅhｕｏ.ｎｅｔ
</script>
</head>
<body style="overflow:auto;">
<form action="" onsubmit="return check_submit();">
用户名：<br>
<input id="txt_user_name" onmouseover="mover();"
onclick="mclick();" onblur="mblur();" value="[请输入用户名]"><br>
密码：<br>
<input id="txt_user_pass" type="password" onmouseover="mover();" value="默认密码"><br>
确认密码：<br>
<input id="txt_user_pass_confirm" type="password" onmouseover="mover();" value="默认密码"><br>
<input type="submit" value="提交" id="submit_button">
</form>
</body>
</html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
转自：http://www.veryhuo.com/a/view/29342.html
分享到：
相关推荐
总结，"表单点击提交按钮后变成灰色"这一现象体现了JavaScript在处理表单提交时对用户体验和数据安全性的考虑。开发者可以通过控制按钮的`disabled`属性，配合事件监听和异步提交技术，实现更加智能和友好的表单交互...
在IT领域，尤其是在Web开发中，"鼠标定位输入框 单选按钮自动选中"是一个常见的交互设计需求。这个功能通常涉及到HTML、CSS以及JavaScript的使用，为用户提供更直观、友好的界面体验。下面我们将详细探讨这个主题。 ...
有时为了提高用户体验，开发者希望当用户点击这些输入框时，能自动选中其中已经存在的示例文本，这样用户就可以直接开始输入，无需手动选择或删除示例文本。 描述中提到，实现自动选中文本框内容的方法非常简单实用...
本篇文章将详细探讨如何利用Qt的QWebView组件与JavaScript交互，实现如标题所述的“QQ邮箱自动填写输入框以及模拟鼠标点击网页按钮”。 首先，QWebView是QtWebKit模块的一部分，它允许在Qt应用程序中嵌入一个Web...
在创建一个带清除按钮的输入框时，我们可以利用HTML5的一些特性，结合CSS和JavaScript来实现这个功能。这个设计通常用于让用户能够方便地删除已输入的内容，提高用户体验。 首先，我们需要在HTML中创建一个`input`...
《jQuery创意输入框表单提交特效详解》 在网页设计中，用户交互体验的重要性不言而喻，其中表单提交是关键环节之一。一个优秀的表单提交特效不仅可以提升用户体验，还能增加网站的专业感和吸引力。"jQuery创意...
根据给定文件的信息，本文将详细探讨如何实现“点击输入框默认文字消失”的效果，并结合提供的代码示例，深入分析四种不同的实现方式及其工作原理。 ### 知识点一：鼠标移动上去，边框变红（第一种方法） 在网页...
// 将单元格转化成文本框 function changeTotext(obj) { var tdValue = obj.innerText; obj.innerText = ""; var txt = document.createElement("input"); txt.type = "text";... var txtValue = document....
网页自动填表技术主要是利用自动化工具或脚本来识别网页中的表单元素（如文本输入框、多行文本输入框等），并通过编程方式自动填充这些表单元素，从而实现表单的自动化填写过程。 #### 三、网页自动填表的基本步骤 ...
在UI设计和前端开发中，"输入框提示文字上浮"是一种常见的交互设计方式，它主要体现在当用户聚焦到输入框时，原本显示在输入框内的提示性文字（hint）会浮升到输入框的上方，形成一种清晰的提示效果。这种设计能够...
在一些搜索网站中，如谷歌搜索，我们已经可以看到类似的交互设计，当用户点击搜索框时，输入框会扩大，以便用户输入更多文字。 至于压缩包内的文件“codesc.net”，这可能是代码示例或者是一个在线代码编辑器的链接...
标题中的“IE8网页输入框和按钮变小解决方法”是指在使用Internet Explorer 8 (IE8)浏览器浏览某些网页时，用户可能会遇到输入框和按钮的尺寸异常缩小的问题。这种情况可能会影响用户的浏览体验和操作便捷性。描述...
当鼠标滑过文本框自动选中输入框内容的技术，涉及了在网页中应用JavaScript来改善用户体验。具体而言，它使用了HTML的事件处理器onmouseover来监听鼠标滑过输入框的事件，并通过JavaScript函数来实现自动选中输入框...
`onTextChanged()`方法则会在EditText的文字内容改变时更新删除按钮的可见状态。 这个自定义的ClearableEditText控件现在可以像普通EditText一样使用，但提供了额外的删除功能。在实际项目中，你可以根据需要调整...
在本例中，"JS特效-表单按钮"标签表明我们关注的是与表单元素（如输入框）交互的JavaScript代码，可能包括自定义的按钮行为。 实现中文和拼音自动转换的核心在于处理用户输入和实时更新显示的内容。这可以通过监听...
输入框，自动补全的输入框，android输入框自动补全输入框 输入框，自动补全的输入框，android输入框自动补全输入框 输入框，自动补全的输入框，android输入框自动补全输入框 输入框，自动补全的输入框，android...
自定义Edittext 带删除按钮的 Edittext 附带旋转透明动画效果,当输入内容时 右侧的删除按钮会出现，当输入框为空时 按钮会隐藏.rar,太多无法一一验证是否可用，程序如果跑不起来需要自调，部分代码功能进行参考学习...
在网页设计中，"带增减按钮的输入框"是一种常见的交互元素，它通常用于数量选择、评分系统或设置特定数值。这种输入框的特点是它不仅包含一个文本输入字段，还配备有两个按钮，一个用于增加数值，另一个用于减少数值...
textarea中有大量数据，获得鼠标选中的部分数据
在这个特定的场景中，我们讨论的是如何在ASP.NET中实现无刷新提交数据并自动添加输入框的功能。这是一个现代Web开发中常见的需求，它能够提升用户体验，因为用户不需要等待整个页面刷新来查看或输入新数据。 无刷新...