jquery + html 多个input同时输入

原创于 2021-01-07 20:27:39 发布 · 844 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #html #前端

前端页面专栏收录该内容

1 篇文章

订阅专栏

源码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />

        <style type="text/css">
        </style>
        </style>
    </head>
    <body>
        <h2 id="h2-caption"></h2>
        <hr><br>
        <form id="id-form-syninput">
            <b>输入框1:  </b><input class="input_1" type="text" name="input-syninput-1"/><br/>
            <b>输入框2:  </b><input class="input_2" value="@139.com" type="text" name="input-syninput-2"/><br/>

        </form>
        <br><hr>

        <script src="./jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $(function(){
				
                $('.input_1').on('keyup',function(){
					

                    $('.input_2').val($(this).val());

                });
			
            });
	
            $(".input_1").on('blur',function(){
				
				var temp_houzui = "@139.com";
				console.log("11111111");
				var temp_poem = $('.input_1').val() + temp_houzui;
				$('.input_2').val(temp_poem);	
						
            })	
			
        </script>
    </body>
</html>