<%@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>
스프링 mvc를 사용하여 서블릿을 프로그래밍하고 있기 때문에 스크립 릿을 사용하고 싶지 않지만 텍스트 상자 안에 입력하는 내용을 동시에 표시하고 싶습니다.
양식을 게시하지 않고 동시에 몇 가지 조치를 취하려면 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 예제를 사용할 수 있습니다 .
이를 여러 가지 방법으로 개선 할 수 있습니다. idfor form:input를 사용하고 jquery를 사용하여 dom 요소를 더 쉽게 선택하는 것, js 파일의 javascript 부분을 포함하여 더 나은 디자인을 위해 고려해야 할 모든 것입니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다