텍스트를 입력으로 바꾸고 편집하는 방법

-4

JavaScript/jQuery에서 초보자라는 말로 시작하겠습니다. 내 웹 사이트에 몇 가지 JavaScript 기능을 사용하기 때문에 방금 배우기 시작했습니다.텍스트를 입력으로 바꾸고 편집하는 방법

하기 전에 :

<div class="container container-table"> 
    <div class="row content"> 
     <div class="col-md-4 text-center"> 
      <div class="container"> 
       <div class="well well-sm"> 
        <div> 
         <strong>Alle producten</strong> 
        </div> 

       </div> 
       <div id="products" class="row list-group"> 
        <?php 
        $items = $dbh->SelectAllproduct(); 
        foreach ($items as $item) { 
        $id = $item['idproduct']; 

        if ($item['bijnaop']==0){ 
         $status = "Het product is niet op"; 

        } 
        if ($item['bijnaop']==1) { 
         $status = "Het product is bijna op"; 

        } 
        if ($item['op']==1) { 
         $status = "Het product is helaas op"; 
        } 

         echo '<div class="item col-xs-12 col-lg-4 col-md-6"> 
         <div class="thumbnail"> 
          <img class="group list-group-image" src="' . $item['productplaatje'] . '" alt="" /> 
          <div class="caption"> 
           <h4 class="group inner list-group-item-heading"> 
            ' . $item['productnaam'] . '</h4> 
           <p class="group inner beschrijving list-group-item-text"> 
            ' . $item['productbeschrijving'] . ' <br> Allergieen: '. $item ['allergieen'].'</p> 
           <div class="row"> 
            <div class="col-xs-12 col-md-6"> 
             <p class="lead"> 
              € ' . $item['productprijs'] . ' </p> 
            </div> 
            <div class="col-xs-6 col-md-6" > 
             '.$status.' 
            </div> 
            <div class="col-xs-6 col-md-6"> 
             <input type="button" href="#" name="'.$item['productnaam'].'" value = "Voeg toe"></a> 
            </div> 

           </div> 
          </div> 
         </div> 
        </div>'; 
        } 
        ?> 
       </div> 
      </div> 

     </div> 
    </div> 
</div>

후 :

<body> 

<div class="container container-table"> 
    <div class="row content"> 
     <div class="col-md-4 text-center"> 
      <div class="container"> 
       <div class="well well-sm"> 
        <div> 
         <strong>Alle producten</strong> 
        </div> 

       </div> 
       <div id="products" class="row list-group"> 
        <?php 
        $items = $dbh->SelectAllproduct(); 
        foreach ($items as $item) { 
         $id = $item['idproduct']; 

         if ($item['bijnaop']==0){ 
          $status = "Het product is niet op"; 

         } 
         if ($item['bijnaop']==1) { 
          $status = "Het product is bijna op"; 

         } 
         if ($item['op']==1) { 
          $status = "Het product is helaas op"; 
         } 

         echo ' 
         <div class="item col-xs-12 col-lg-4 col-md-6"> 
          <div class="thumbnail"> 
           <img class="group list-group-image" src="' . $item['productplaatje'] . '" alt="" /> 
           <input type ="text" value="' . $item['productplaatje'] . '"> 
            <div class="caption"> 

             <h4 class="group inner list-group-item-heading"> 
              <input type ="text" value = "' . $item['productnaam'] . '"> 
             </h4> 

             <p class="group inner beschrijving list-group-item-text"> 
              <input type ="text" value="'. $item['productbeschrijving'] . '"> 

             </p> 

             <p> 
             <input type ="text" value = "Allergieen: '. $item ['allergieen'].'"> 
             </p> 

             <div class="row"> 

              <div class="col-xs-12 col-md-6"> 
               <p class="lead"> 
                <input type = "text" value="€' . $item['productprijs'] . ' " 
               </p> 

              </div> 


              <div class="col-xs-6 col-md-6"> 

              </div> 

             </div> 
            </div> 
          </div> 
        </div>'; 
        } 
        ?> 








       </div> 
</body>

내가 달성하고자하는 것은 당신이 편집 버튼을 클릭하면 다음과 같다

div을 입력으로 바꾸는 방법에 대한 여러 가지 스크립트를 살펴 보았습니다.하지만 테스트 할 때마다 제대로 작동하지 않을 때마다 또는 정확히 내가 원하는 것은 아닙니다.

편집 : 그들은 그들이 입력과 같이 그 스타일을, 당신은 단지 div의 contentEditable="true"을 변경할 수있는 몇 분

출처

2017-10-22 Daniel

지금까지 해보신 것은 무엇입니까? – Nick

스택 오버플로에 오신 것을 환영합니다. [도움말]에서 [ask]를 참조하십시오. 어떤 것을 시도했는지 구체적으로 문제가있는 것이 무엇인지 보여주십시오. –

다른 사람들을 명확하게 이해하려면 여기에 사용 된 코드를 포함시켜야합니다. – fatih

코드를 추가합니다. 그런 다음 변경 사항을 적용하려면 contentEditable을 모두 삭제하십시오.

출처

2017-10-22 17:26:01 sgiant

텍스트를 입력으로 바꾸고 편집하는 방법

답변

관련 문제