jquery获取文本框的值

获取文本框的值

使用jQuery获取文本框的值可以通过val()方法实现。以下是几种常见场景的示例代码：

获取普通文本框的值

var textValue = $('#textboxId').val();

获取密码框的值

var passwordValue = $('input[type="password"]').val();

获取多行文本框的值

var textareaValue = $('#textareaId').val();

实时监听输入变化

可以通过事件监听实时获取文本框内容变化：

使用input事件

$('#textboxId').on('input', function() {
    console.log($(this).val());
});

使用keyup事件

$('#textboxId').keyup(function() {
    console.log($(this).val());
});

表单提交时获取值

在表单提交时获取所有文本框的值：

$('form').submit(function(e) {
    e.preventDefault();
    $('input[type="text"], textarea').each(function() {
        console.log($(this).val());
    });
});

注意事项

• 确保DOM加载完成后再执行jQuery代码，可以将代码放在$(document).ready()中
• 对于动态生成的元素，需要使用事件委托
• 获取的值都是字符串类型，需要时可以进行类型转换

示例：动态显示输入内容

$(document).ready(function() {
    $('#inputField').on('input', function() {
        $('#displayArea').text($(this).val());
    });
});

<input type="text" id="inputField">
<p id="displayArea"></p>