显示隐藏文本框内容 当鼠标点击文本框时,里面的默认文字隐藏,当鼠标离开文本框时,里面的文字显示。 提示 1.首先表单需要2个新事件,获得焦点 onfocus 失去焦点 onblur 2.如果获得焦点, 判断表单里面内容是否为默认文字,如果是默认文字,就清空表单内容,新内容文字、边框颜色为黑色 3.如果失去焦点, 判断表单内容是否为空,如果为空,则表单内容改为默认文字,同时文字、边框颜色为灰色 4.思考你用哪种方法修改样式
时间: 2023-06-27 09:05:14 浏览: 375
可以使用JavaScript来修改样式。具体实现如下:
HTML代码:
```html
<input type="text" id="myInput" value="请输入内容" onfocus="hideText()" onblur="showText()">
```
JavaScript代码:
```javascript
function hideText() {
var input = document.getElementById("myInput");
if (input.value == "请输入内容") {
input.value = "";
input.style.color = "#000";
input.style.border = "1px solid #000";
}
}
function showText() {
var input = document.getElementById("myInput");
if (input.value == "") {
input.value = "请输入内容";
input.style.color = "#aaa";
input.style.border = "1px solid #aaa";
}
}
```
相关问题
显示隐藏文本框内容, 案例:显示隐藏文本框内容 当鼠标点击文本框时,里面的默认文字防藏,当鼠标离开文本框时,里面的文字显示 提示:注册事件获得焦点事件onf ocusf 注册事件失去焦点事件onblure
在网页开发中,要实现显示和隐藏文本框内容的功能,通常会使用JavaScript或者jQuery结合HTML和CSS。下面是一个简单的例子,展示了如何通过JavaScript处理鼠标点击和离开事件来控制文本框内文字的可见性:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<style>
.hidden-text {
display: none;
}
</style>
</head>
<body>
<input type="text" id="myTextBox" class="hidden-text" value="默认文字">
<button onclick="toggleText()">点击切换文本</button>
<script>
function toggleText() {
var textBox = document.getElementById("myTextBox");
if (textBox.classList.contains("hidden-text")) {
textBox.style.display = "block";
textBox.classList.remove("hidden-text");
} else {
textBox.style.display = "none";
textBox.classList.add("hidden-text");
}
}
// 鼠标焦点事件和失焦事件绑定
var textBox = document.getElementById("myTextBox");
textBox.addEventListener('focus', function() {
toggleText();
});
textBox.addEventListener('blur', function() {
toggleText();
});
</script>
</body>
</html>
```
在这个示例中,当用户点击文本框时,`toggleText`函数会被触发,隐藏的文字就会显示出来;反之,如果失去焦点(即鼠标移出文本框),则再次隐藏文字。这个功能利用了CSS的`display`属性和`classList`来动态切换元素的可见状态。
为一个文本框添加提示文本。当单击文本框时,里面的默认提示文字会隐藏,鼠标指针离开文本框,里面的文字会显示出来在JavaScript中
在JavaScript中,你可以通过监听`focus`和`blur`事件来实现在文本框上添加提示文本的功能。以下是简单的步骤:
1. 首先,在HTML中创建一个输入元素,并设置一个data属性来存储提示文本,例如:
```html
<input type="text" id="txtInput" data-prompt="请输入内容">
```
2. 使用JavaScript获取这个文本框并为其添加事件处理函数:
```javascript
var txtInput = document.getElementById('txtInput');
// 当用户点击文本框时
txtInput.addEventListener('focus', function() {
// 移除提示文本
this.placeholder = '';
});
// 当用户将鼠标移出文本框时
txtInput.addEventListener('blur', function() {
// 如果输入框为空,显示提示文本
if (this.value === '') {
this.placeholder = this.getAttribute('data-prompt');
}
});
```
在这个例子中,当你单击文本框时(即聚焦),它的`placeholder`属性会被清空,隐藏默认提示。当鼠标指针离开文本框(即失去焦点),如果输入框没有内容,它会恢复到原始的提示文本。
阅读全文
相关推荐














