js鼠标事件，这是WEB日常开发经常用到的，比如我们在处理input文本框的内容时，当value的值为实际内容时，此时假如我们需要访客重新输入，或者把value当作提示文字时，怎么能让网站体验达到最高呢，那就是方便访客输入，这就用到了本文中的特效。关于js鼠标的事件，烈火讲到很多，例如：javascript鼠标事件总结、Js Event之鼠标事件、鼠标触发文字变色、Input输入框点击消失鼠标离开还原、输入框(Input)默认的文字为灰色等等，更多相关教程，请用烈火站内搜索查找吧！
那么本文讲的就是提高网站用户体验的小技巧之：鼠标点击或经过时，文本输入框文字清除、选中的功能。
下面就来看一下实际代码：
<html>
<head>
<title>鼠标点击文本框后，里面的文字就消失或全选中 - 网页特效来自：烈火学院 Liehuo.Net</title>
</head>
<body>
鼠标点击文字消失：<input name="textfield" style="color:#CCC;" type="text" value="点击文字消失" size="12" onclick="value='';focus()" />
<br/> <br/>
鼠标点击文字选中：<input name="textfield" type="text" value="点击文字选中" size="12" onclick="focus();select()" />
<br/><br/>
<input name="key" type="text" id="key" style="color:#CCC;" value="烈火学院" size="30" onmouseover=this.focus();this.select(); onclick="if(value==defaultValue){value='';this.style.color='#000'}" onBlur="if(!value){value=defaultValue;this.style.color='#CCC'}" style="color:#ccc" />
<script type="js/text">
function aa(){
if((document.getElementsById(key).value).trim()==""){
alert("key");
return false;
}
}
</script>
<input type="submit" id="ddf" onclick="return aa();">
</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/23617.html
分享到：
相关推荐
4. **交互设计**：在Canvas上模拟输入框，需要考虑鼠标交互，如焦点、选中和清除文本等操作。可以通过监听 `mousedown`、`mouseup` 和 `mousemove` 事件来实现这些功能。 5. **样式自定义**：虽然Canvas本身没有...
- `onFocus`：当输入框获得焦点时触发，可以用于清除预设文本。 - `onChange`：当输入框内容改变时触发，常用于实时验证或更新数据。 - `onSelect`：选中文本时触发，可用于高亮或其他效果。 2. **自定义按钮...
2. `onchange`事件：当表单元素的值发生改变且失去焦点时触发，如文本输入框或选择列表。这个事件常用于实时检查或更新用户输入的数据。 3. `onclick`事件：当用户点击元素时触发，可以用于激活链接、按钮或其他...
- `onSelect`：用户选择文本时触发，可配合其他事件处理选中文本的操作。 2. **自定义按钮样式**： 使用CSS来改变按钮的背景色、边框和字体样式，如示例中设置的特殊颜色按钮，可提高界面美观度。 3. **鼠标悬停...
在本例中，我们为文本输入框添加获取焦点和失去焦点的交互，例如当用户开始输入时显示或隐藏相关图标。 4. **按钮元件**：按钮是触发交互的关键元素。在登录界面，按钮通常用于提交用户信息。在Axure中，你可以为...
通过`onfocus`与`onblur`事件，可以实现在输入框获得焦点时清除默认提示文字，以及失去焦点时若未输入内容则恢复提示文字的功能。 **示例代码：** ```html (value=='mm'){value=''}" onblur="if (value==''){value...
- `ClearSelected()`：清除所有选中项。 **常用事件**： - `SelectedIndexChanged`：当所选项发生变化时触发。 --- #### 1.5 ComboBox控件 ComboBox控件结合了TextBox和ListBox的功能，提供了一个下拉列表供...
`GetEditSel()`和`SetEditSel()`函数可以用于获取或设置输入框中被选中的字符范围： ```cpp DWORD nSel = m_cbExample.GetEditSel(); m_cbExample.SetEditSel(nStartChar, nEndChar); ``` 同时，`LimitText()`函数...
1. **选中首词列**：将鼠标指针移至表格第一列顶部，当指针变为向下箭头时，单击以选中该列的所有文本。 2. **设置字体格式**：将选中的首词设置为黑体或加粗。 #### 步骤四：恢复文本格式 1. **转换回文本**： - ...
首先，`setPlaceholderText()`函数用于设置输入框的提示文字，当用户尚未输入内容时，这个提示文字会显示在QLineEdit内，帮助用户了解该输入框预期的输入类型。例如，你可以设置一个电影搜索框的提示为“请输入电影...
- `clear()`：清除输入框中的文本。 3. 事件处理：QLineEdit可以响应各种键盘和鼠标事件。例如，你可以重写`keyPressEvent()`和`keyReleaseEvent()`来处理特定的按键行为，或者使用信号和槽机制监听`textChanged()...
- 当鼠标悬停在输入框上时，输入框自动获得焦点并选中文本。 ### 14. 显示文档最后修改时间 - **`document.lastModified` 属性**: 可以使用JavaScript读取此属性来显示文档最后一次被修改的时间。 - **示例**: `...
- **功能说明**：此代码为一个文本框，当光标聚焦在文本框内时（即触发`onfocus`事件），如果文本框内的值为“郭强”，则将文本框清空；当光标离开文本框时（即触发`onblur`事件），如果文本框为空，则自动填充...
自动选中输入框中的文本。 ```html 搜索" onFocus="this.select()" onMouseOver="this.focus()" class="line"> ``` ### 14. 显示文档最后修改时间 使用JavaScript动态显示文档最后被修改的时间。 ```html ...
`<textarea>` 用于创建多行文本输入框，适用于较长的文本输入。 #### 图片标签：`<img>` `<img>` 标签用于插入图像，其主要属性包括： - **`src`**：指定图像文件的路径。 - **`title`**：为图像提供额外的信息，...
15. onselect：当用户选择文本时触发，可用于获取选中文本或实现自定义复制功能。 16. onsubmit：当用户提交表单时触发，可以用来进行表单验证或异步数据提交。 17. onunload：当用户离开页面或浏览器关闭时触发，...
超实用的jQuery代码段精选近350个jQuery代码段，涵盖页面开发中绝大多数要点、技巧与方法，堪称史上最实用的jQuery代码参考书，可以视为网页设计与网站建设人员的好帮手。《超实用的jQuery代码段》的代码跨平台、跨...
此代码段表示当输入框失去焦点且为空时显示“提示文字”，获得焦点时清除该提示。 #### `onFocus` - 获得焦点事件 当用户点击某个输入框时触发。 ```html 提示文字" onblur="if (this.value === '') { this.value =...