jspを使用してテキストボックスに入力する内容を出力する方法

Question

<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> 
<%@taglib prefix="form" uri="http://www.springframework.org/tags/form" %> 
<form:form 
    action="/hospital/login.html" 
    method="post"> 
     User name: <form:input name="un" path="username"/> <br/> 
     password: <form:password path="password"/><br/> 
<c:out value="${ un }" /> 
</form:form> 

私はspring mvcを使用してサーブレットをプログラミングしているので、scritpletsを使用したくないですが、テキストボックス内に入力するものを同時に表示します。

Answer 1

フォームをポストしないで、何らかのアクションを同時に実行したい場合は、Javascriptを使用してクライアントサイドスクリプトが必要になります。

あなたが望むものを達成するための非常にシンプルで純粋なJavascriptの方法は以下のとおりです。

<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> 
<%@taglib prefix="form" uri="http://www.springframework.org/tags/form" %> 
<form:form 
    action="/hospital/login.html" 
    method="post"> 
     User name: <form:input name="un" path="username" onkeyUp="javascript:sync()" /> <br/> 
     password: <form:password path="password"/><br/> 
<span id='outLabel'></span> 
</form:form> 

<script type="text/javascript"> 
function sync() 
{ 
    var textbox = document.getElementsByName('un')[0]; 
    var label = document.getElementById('outLabel'); 
    label.textContent = textBox.value; 
} 
</script> 

JSFiddleのクライアント側の部分の例は、hereです。

idをform:inputにすると、jsファイルからjavascriptの部分を含め、より簡単にdom要素を選択するためにjqueryを使用すると、より良い設計を考慮する必要があります。