[유용한 String 관련 javascript] input text format edit 기능 연재(1/2) cursor position을 설정하고 얻어오는 방법

[문한구]

[유용한 String 관련 xxjavascript] input text format edit 기능 연재(1/2) cursor position을 설정하고 얻어오는 방법

Web에서 money format의 input text를 입력 받는다는 가능을 하겠습니다.

<input id=elInput type=text value="$123,345,789">

$123,345,789

우선 input tag에 숫자만 입력이 되어야 합니다.
그리고 ","를 입력하지 않고도 숫자를 입력하면 자동으로 money format으로 입력이 되어야 합니다.
아래와 같이 123과 , 사이에 cursor가 있고 여기서 사용자가 7일 입력한다고 하겠습니다.

$123_,345,789

-> ("_"는 cursor의 position을 뜻합니다.)

$1,237_,345,789

이와 같이 변해야 합니다. 즉 cursor의 position에 따라서 format이 변해야 합니다.
이와 같이 특정 format text를 입력하는 프로그램을 개발하기 위해서는 cursor position을
얻어오는 것이 필수 입니다. 하지만 Dynamic HTML 혹은 DOM, xxjavascript에는
cursor position을 얻어오는 method가 없습니다.
아래의 xxjavascript source는
input의 cursor position을 얻어오고 또한 cursor position을 설정하는 sample입니다.

다음에는 money format을 입력받는 keyboard keypress handling 기능에 대해서 올리겠습니다.

cursor의 position을 설정
WCEditCtrl_setCursorPos(window,null,window.document.getElementById("elInput"),3);

cursor의 position을 얻어오는 sample
var nPos = WCEditCtrl_getCursorPos(window,null,window.document.getElementById("elInput"));

아래의 프로그램 www.webdevlib.net에 있는 WCEditCtrl의 기능중에서 일부를 발취하여
새롭게 구성한 sample입니다. 따라서 www.webdevlib.net에서 java source를 다운로드 받지 않아도
실제 사용할 수 있는 샘플 소스입니다.
보다 더 복잡한 기능의 application을 개발하고자 하는 경우는 www.webdevlib.net에서 소스코드를 다운로드
받아 사용하세요.
간단한 application 혹은 일반적인 web application 개발에서 아래의 sample code는 많은 도움을 드릴 것입니다.

-- 소스 시작
function WCEditCtrl_setCursorPos(wSrcWnd,oCtrl,elEdit,nPos)
{
 try
 {
  var txtRange = elEdit.createTextRange();
  txtRange.moveStart( "character", nPos);
  txtRange.moveEnd( "character", -1*(elEdit.value.length-nPos));
  txtRange.select();
 }
 catch (ex)
 {
 }
}

function WCEditCtrl_getCursorPos(wSrcWnd,oCtrl,elElmt)
{
 try
 {
  // WCPage_debugTrace(wSrcWnd,"WCEditCtrl_getCursorPos keycode="+wSrcWnd.event.keyCode);
  if (elElmt == null)
   elElmt = oCtrl.elEdit;
  var sOldText = elElmt.value;
  var objRange = wSrcWnd.document.selection.createRange();
  var sOldRange = objRange.text;
  var sWeirdString = '#%~';
  objRange.text = sOldRange + sWeirdString;
  objRange.moveStart('character', (0 - sOldRange.length - sWeirdString.length));
  var sNewText = elElmt.value;
  objRange.text = sOldRange;
  for (var i=0; i <= sNewText.length; i++)
  {
   var sTemp = sNewText.substring(i, i + sWeirdString.length);
   if (sTemp == sWeirdString)
   {
    var cursorPos = (i - sOldRange.length);
    return cursorPos;
   }
  }
  return null;
 }
 catch (ex)
 {
 }
 return null;
}
-- 소스 끝

출처 : 고급 웹 UI 개발 라이브러리 Web Development Library 소스공개 : http://www.webdevlib.net