jquery 输入框获取焦点
时间: 2023-11-18 10:51:25 浏览: 37
通过使用jQuery可以实现输入框获取焦点的功能。在代码中,可以使用.focus()方法来设置输入框获取焦点,使用.blur()方法来设置输入框失去焦点。具体实现方式如下:
```
// 获取焦点
$("#username").focus(function(){
var curValue = $(this).val();
if(curValue == this.defaultValue){
$(this).val("");
}
});
// 失去焦点
$("#username").blur(function(){
var curValue = $("#username").val();
if($.trim(curValue) == ""){
$(this).val(this.defaultValue);
}
});
```
这段代码中,当用户名输入框获得焦点时,如果当前值等于默认值,则清空输入框的值。当失去焦点时,如果输入框的值为空,则将默认值重新填入输入框。
相关问题
jQuery 输入框获得焦点时改变输入框背景色(颜色自定义),失去焦点后恢复原颜色。
可以使用 jQuery 的 focus() 和 blur() 方法来实现输入框获得焦点和失去焦点的事件监听,然后通过改变输入框的 CSS 样式来修改背景色。以下是一个示例代码:
```html
<input type="text" id="myInput">
<script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function() {
var originalColor = $('#myInput').css('background-color');
$('#myInput').focus(function() {
$(this).css('background-color', 'red');
}).blur(function() {
$(this).css('background-color', originalColor);
});
});
</script>
```
在上述代码中,我们首先获取了输入框的原始背景色,然后在输入框获得焦点时将背景色修改为红色,在失去焦点时将背景色恢复为原始颜色。你可以将红色替换为任何你想要的颜色。
jQuery实现输入框提示,当获取焦点时提示消失,当失去焦点时内容为空则显示提示,否则保留输入信息...
可以使用jQuery的focus()和blur()方法,以及val()方法来实现输入框提示的效果。具体的代码如下:
HTML代码:
```html
<input type="text" id="inputBox" value="请输入内容">
```
jQuery代码:
```javascript
$(function() {
var defaultValue = $('#inputBox').val(); // 获取输入框的默认值
$('#inputBox').focus(function() {
if ($(this).val() === defaultValue) {
$(this).val(''); // 输入框获取焦点时,如果输入框的值等于默认值,则清空输入框
}
}).blur(function() {
if ($(this).val() === '') {
$(this).val(defaultValue); // 输入框失去焦点时,如果输入框的值为空,则显示默认值
}
});
});
```
在代码中,首先获取输入框的默认值,然后使用focus()方法和blur()方法分别对输入框获取焦点和失去焦点的事件进行处理。在获取焦点的事件处理函数中,如果输入框的值等于默认值,则清空输入框;在失去焦点的事件处理函数中,如果输入框的值为空,则显示默认值。这样就可以实现输入框提示的效果了。