实时获取input输入的值实例

最新推荐文章于 2022-05-03 11:29:42 发布

泡泡菌

最新推荐文章于 2022-05-03 11:29:42 发布

阅读量2k

点赞数

分类专栏： javascrip 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/Junpaopao/article/details/78326588

版权

javascrip 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了一种使用jQuery实现的实时输入验证与处理方法。该方法可以即时显示用户输入的内容，并去除输入字段前后可能存在的空白字符，确保输入的有效性和准确性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
    <title>first example</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../../js/jquery-2.1.4.js"></script>
<body>
//实时获取input的值并输出
    <div class="inputwrapper">
        <label><span>姓名：</span><input type="text" name="fullname" id="test"></label>
        <div class="result"></div>
    </div>
//禁止input前后输入空格
    <p class="right-input" id="yeHao">
        <input type="text" class="form-control" id="prjNum" name="prjNum" onKeyup="showData()">
    </p>
<script>
    $(function(){
//实时获取input的值并输出
        $(".inputwrapper").find('#test').on('input propertychange',function(){
            var result = $(this).val();
            console.log(result);
            $(".inputwrapper").find('.result').html(result);
        });

//禁止input前后输入空格
        $("#yeHao").find('input').on('input propertychange',function(){
            var a = $(this).val();
            var result=a.trim()
            console.log(result);
            $(this).val(result);
        });
    })
</script>
</body>
</html>