「JSP」テキストボックスに入力後、フォーカスアウトで字体を変化させたい。

Question

###前提・実現したいこと

Webアプリケーションを作成しようとしています。
①テキストボックスに、時間を入力してもらう。（例：「0900」）
②マウスでどこか別の場所をクリックするなどして、フォーカスが外れた際に字体を変える。（例：「9:00」）
といったことをしたいと考えています。

当方はJavaの基本は理解できていると考えております。
JSP・サーブレット、strutsを学び始めたばかりでして、
基本的な事なのかもしれないのですが、自分で調べても解決することが出来ず、
この場を借りて質問させていただきました。

どのように実装を行えばいいでしょうか？
どうかよろしくお願いいたします。

###該当のソースコード

・FocusForm.java

package form;
import org.apache.struts.action.ActionForm;
public class FocusForm extends ActionForm {
	private String time;
	public void setTime(String time){
		this.time = time;
	}
	public String getTime(){
		return this.time;
	}
}

------------------------------------------------------------

・FocusAction.java

package action;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts.action.Action;
import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionForward;
import org.apache.struts.action.ActionMapping;
public class FocusAction extends Action {
	public ActionForward execute(ActionMapping mapping, ActionForm form, HttpServletRequest request, HttpServletResponse response) throws Exception{
		return mapping.findForward("success");
	}
}

------------------------------------------------------------

・focus.jsp

<%@ page contentType="text/html; charset=UTF-8" %>
<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html" %>
<%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean" %>
<%@ taglib uri="http://java.sun.com/jstl/core" prefix="c" %>
<html:html>
	<html:text name="focusForm" property="time" />
</html:html>

------------------------------------------------------------

・struts-config.xml

    （省略）
<form-beans>
    	<form-bean name="focusForm" type="form.FocusForm" />
    （省略）

    （省略）
<action-mappings>
    	<action
    		name="focusForm"
    		path="/FocusAction"
    		type="action.FocusAction">
    			<forward name="success" path="/focus.jsp" />
    	</action>
    （省略）

###補足情報(言語/FW/ツール等のバージョンなど)
Struts 1.3
Eclipse 4.4
Tomcat 7

Answer 1

フォーカスを外した直後に値を書き換えたいのであれば、JavaScriptで実現するのが良いでしょう。
※Struts1やJSPの実装は不要ですので、HTML+JavaScriptで実装できます。

Comments

[red-pain33]

回答、ありがとうございます。

JavaScriptでの実装に挑戦しましたところ、
イメージ通りの動きをさせることに成功しました。

A-pZさんの助言により、実装の方向性を明確にすることが出来ました。
本当にありがとうございました。

[red-pain33]

以下に拙いですがソースコードを記載させていただきます。

ーーーーーーーー

・focus.jsp

<script>
function focusFunc(){
var value = document.focusForm.time.value;
if(value != ""){
var timeArray = value.split(":");
document.focusForm.time.value = timeArray[0] + timeArray[1];
}
}
function blurFunc(){
var value = document.focusForm.time.value;
if(value != ""){
var time1 = value.substr(0, 2);
var time2 = value.substr(2, 2);
document.focusForm.time.value = time1 + ":" + time2;
}
}
</script>
<html:html>
<html:form>
<html:text property="time" onfocus="focusFunc()" onblur="blurFunc()" />
</html:form>
</html:html>