이전의 초진기록지

원하는 부위를 입력하고, 좌우, 외상 여부를 입력하고 VAS를 입력하면 결과가 출력되었다. 하지만 복사를 해서 넣으려고 해도 해도 안돼서... 방법을 찾게 되었다.

방법은... Textarea 나 input 박스로 옮겨야..

이전 버젼에서는 javascript의 innerHTML을 통해서 의 값을 변경하는 식이었는데, 내용을 복사하려고 하니 잘 되지 않았다. 검색을 해보니 input 박스에 있는 내용을 clipboard로 할 수 있는 것을 확인했고, input 박스로 시도하다가 보니 textarea로 된다는 사실을 알게 되었다.

textarea로 입력 받은 글을 공백과 줄바꿈을 살려 출력하기

HTML에디터가 아닌 일반 textarea 로 입력 받을 글을 페이지에 출력해야 할 경우가 많이 있습니다. 출력시에는 보통 JSP 라면 형태로 출력하고, html 태그들은 escape 되어서 태그가..

offbyone.tistory.com

textarea로 받은 자료는 을 인식 못해서..

개행 문자(?)를 인식하지 못하는 문제가 있었는데, textarea 안에서는 '\n'를 대신 입력하면 과 같은 효과를 보인다는 것을 알게 되었다.

결과

Unsplash 의 random 이미지를 배경으로 설치를 하고...

unsplash는 random 이미지를 제공하는데, 새로고침할 때마다 새로운 이미지가 로딩된다. 매일매일이 지긋지긋한 의사들에게 신선한 이미지가 될 수 도 있으리라 : ) 미디어 쿼리까지도 설정해두어서 500px까지는 적용해서 쓸 수 있겠다.

나중에....

다음에 하려고 하는 행위는 google spread sheet로 DB 데이터 넣기
https://nubiz.tistory.com/538

참고 사이트

1. 치환 관련(replace)

[자바스크립트] replace() 문자 변환, 치환

자바스크립트를 사용해 특정 문자를 다른 문자로 치환하는 방법에 대하여 알아볼까합니다. 먼저 사용할 메소드는 replace() 입니다.

webisfree.com

2. <textarea>에서 을 사용하지 않고 개행하는 방법

textarea로 입력 받은 글을 공백과 줄바꿈을 살려 출력하기

offbyone.tistory.com


<!doctype html>
<html>
<head>
<meta charset='UTF-8'><meta name='viewport' content='width=device-width initial-scale=1'>

</head>
<style>
body{
  font-family:'Nanum Gothic', sans-serif;
  background-image:url('https://source.unsplash.com/user/impatrickt');
  background-size:100%;
}
.blank50{
  height:50px;

  }
.content-wrap{
  background-color:white;
  margin-left:auto;
  margin-right:auto;
  width :550px;
  border: 3px solid #333333;
  padding: 20px;
  border-radius:5px;

}
.my-content{
  font-size:20px;
  line-height:1.8em;
}
.my-range{
  font-size:20px;
}
.my-content input[type=radio],.my-content input[type=checkbox]{
/* Double-sized Checkboxes */
  -webkit-transform: scale(2); /* Safari and Chrome */
  margin: 10px;
}
input[type="button"]{
margin-top:20px;
padding: .5rem 1rem;
font-size: 1.25rem;
line-height: 1.5;
border-radius: .3rem;
color: #fff;
    background-color: #007bff;
    border-color: #007bff;
    width: 300px;
}
input[type="reset"]{
padding: .5rem 1rem;
font-size: 1.25rem;
line-height: 1.5;
border-radius: .3rem;
color: #fff;
}

input[type=range]{
    -webkit-appearance: none;
    width:250px;
}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: 3px solid white;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background: red;
    margin-top: -4px;
}
input[type=range]::-webkit-slider-runnable-track {
    width: 500px;
    height: 10px;
    background: #ddd;
    border: none;
    border-radius: 3px;
}
input[type=range]:focus {
    outline: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
    background: #ccc;
}


input[type="reset"]{
  background-color: white;
  color: #333333;
}
textarea {
  border:2px solid black;
  width: 92%;
    border-radius:5px;
    padding:20px;
    font-size:1rem;
    font-weight:700;
    font-family:'Nanum Gothic', sans-serif;
}


input[type=range]:focus::-webkit-slider-runnable-track {
  background: #367ebd;
}

@media screen and (max-width:500px){
  .content-wrap{

  }
  .my-content{
      font-size:15px!important;
  }
  .my-content input[type=radio],.my-content input[type=checkbox]{
  /* Double-sized Checkboxes */
    -webkit-transform: scale(1.5); /* Safari and Chrome */
    margin: 8px;
}
.content-wrap{
  width :90%;
  padding: 1rem;
  border-radius:5px;

}
}

</style>
<script>
function myFunction(){

//오늘 날짜 확인
  var date = new Date(); //매개변수가 없는 경우 현재 날짜와 시간을 가지는 인스턴스를 반환한다.
   var month = date.getMonth() + 1; // 0부터 시작하므로 1더함 더함
   var day   = date.getDate();

   if (("" + month).length == 1) { month = "0" + month; }
   if (("" + day).length   == 1) { day   = "0" + day;   }
   var printedDate = month +'-'+day;
  <!-- 아래 부분은 통증 위치 파악-->
    var Location = ""
    for(var i=0; i<19; i++){
     if(document.getElementsByName("pain-location")[i].checked == true){

       var Location = Location + document.getElementsByName("pain-location")[i].value
     }};

//


//아래 부분은 통증 좌우 파악
  var Lesion=""
  for(var i=0; i<3; i++){
   if(document.getElementsByName("pain-lesion")[i].checked == true){
     var Lesion = document.getElementsByName("pain-lesion")[i].value
   }};


// 아래 부분은 외상 여부 파악
var Trauma=""
var TraumaReason= document.getElementById("trauma-reason").value
var TraumaDuration= document.getElementById("trauma-duration").value
for(var i=0; i<2; i++){
 if(document.getElementsByName("trauma")[i].checked == true){
   var Trauma = document.getElementsByName("trauma")[i].value
 }};


//아래 부분은 VAS 파악

   var VAS=document.getElementById("vas-range").value;


   var printedResult= Location +' '+ Lesion+' '+Trauma+' '+TraumaReason+' , '+ TraumaDuration+' , VAS: '+VAS +'\n'+   'SB(+)'+'\n'+printedDate ;
   document.getElementById("myResult").innerHTML= printedResult;

//아래는 결과 트리밍
printedResult=printedResult.replace('  ',' r');

//결과 클립볻드로 복사
 copy_to_clipboard();
};

function copy_to_clipboard() {
     var copyText = document.getElementById("myResult");
     copyText.focus();
     copyText.select();
     document.execCommand("Copy");
   }

</script>




<body>
<div class="blank50"></div>
<div class="content-wrap">
  <h1> 초진 기록지 for BM by BM </h1>
          <form>
          <div class="my-content">
            <div name="my-pain-location">
              <input type="checkbox" name="pain-location" value="목,">목
             <input type="checkbox" name="pain-location" value="어깨,">어깨
              <input type="checkbox" name="pain-location" value="어깨죽지,">어깨죽지
              <input type="checkbox" name="pain-location" value="허리,">허리
              <input type="checkbox" name="pain-location" value="등,">등
              <input type="checkbox" name="pain-location" value="갈비뼈,">갈비뼈 <br>
              <input type="checkbox" name="pain-location" value="엉덩이,">엉덩이
              <input type="checkbox" name="pain-location" value="고관절,">고관절
        <input type="checkbox" name="pain-location" value="허벅지,">허벅지
              <input type="checkbox" name="pain-location" value="무릎,">무릎
              <input type="checkbox" name="pain-location" value="종아리,">종아리<br>
              <input type="checkbox" name="pain-location" value="발목,">발목
              <input type="checkbox" name="pain-location" value="발가락,">발가락
              <input type="checkbox" name="pain-location" value="발바닥,">발바닥
              <br>
              <input type="checkbox" name="pain-location" value="손가락,">손가락
              <input type="checkbox" name="pain-location" value="팔꿈치,">팔꿈치
              <input type="checkbox" name="pain-location" value="손목,">손목
               <input type="checkbox" name="pain-location" value="손바닥,">손바닥
              <input type="checkbox" name="pain-location" value="lower arm,"> lower arm
         </div>

        <hr>
            <div name="my-pain-lesion">
                <input type="radio" name="pain-lesion" value="-/+,">좌
                <input type="radio" name="pain-lesion" value="+/-,">우
                <input type="radio" name="pain-lesion" value="+/+,">양측
            </div>

            <div name="my-trauma">
                <input type="radio" name="trauma" value="외상(-)" checked>외상 없음
                <input type="radio" name="trauma" value="외상(+):">외상 있음
                <input type="text"  id="trauma-reason" placeholder="이유를 입력하세요"
                       minlength="4" maxlength="200" size="50" height="30px" style="line-height: 30px;"><br>
                <input type="text"  id="trauma-duration" placeholder="통증 기간을 입력하세요"
                              minlength="4" maxlength="200" size="30" height="30px" style="line-height: 30px;">
            </div>




            <div class="my-range">
                  VAS   <input oninput = 'ShowSliderValue(this.value)' id="vas-range" type = "range" min='0' max='10' value='4' step='2'>
                        <span id="slider_value_view">4</span>점

                                  <script language = "javascript">
                                    function ShowSliderValue(sVal)
                                    { 	var obValueView = document.getElementById("slider_value_view");
                                  	  obValueView.innerHTML = sVal
                                    }
                                  </script>
            </div>

            <div id="submission-hc">
                        <input type="button" class="btn-yes" value="결과" onclick="myFunction()">
                        <input type="reset" value="새로고침">
            </div>


        <div id="result" >
        <hr>
         <textarea id="myResult"  rows="8" style="white-space:pre;">위의 결과를 누르시면 결과가 클립보드로 복사됩니다.</textarea>
       </div>
</div>




</body>
</html>

저작자표시 비영리 변경금지

'보이지 않는 더 넓은 세상💻 > 개발인지 개🐕발인지' 카테고리의 다른 글

구글 스프레드 시트를 DB로 사용하기# 2 (0)	2019.11.06
디지털 헬스 해커톤 2019 참가 후기 (2)	2019.10.16
보편적이지 않은 개발#3] 구글 스프레드 시트를 DB처럼 이용해보자 (4)	2019.05.15
보편적이지 않은 개발#2] 예진 차트 작성기 (0)	2019.05.10
보편적이지 않은 개발] 건강검진 추천 프로그램 #1 (0)	2019.05.10

♡를 눌러주시면 블로그를 작성하는데 큰 힘이 됩니다♪
로그인이 필요없어요.

두드림(Do Dream)

보편적이지 않은 개발] 초진기록지 #2

이전의 초진기록지

방법은... Textarea 나 input 박스로 옮겨야..

textarea로 받은 자료는 <br>을 인식 못해서..

결과

Unsplash 의 random 이미지를 배경으로 설치를 하고...

나중에....

참고 사이트

'보이지 않는 더 넓은 세상💻 > 개발인지 개🐕발인지' 카테고리의 다른 글

티스토리툴바

보편적이지 않은 개발] 초진기록지 #2

이전의 초진기록지

방법은... Textarea 나 input 박스로 옮겨야..

textarea로 받은 자료는 <br>을 인식 못해서..

결과

Unsplash 의 random 이미지를 배경으로 설치를 하고...

나중에....

참고 사이트

'보이지 않는 더 넓은 세상💻 > 개발인지 개🐕발인지' 카테고리의 다른 글

'보이지 않는 더 넓은 세상💻/개발인지 개🐕발인지' Related Articles

이 블로그 인기글

티스토리툴바