隐藏文本区域中的标签,但应实现标签的效果

时间:2018-10-01 05:50:41

标签: javascript php jquery html5

是否可以隐藏文本区域中的所有标签并在标签内部显示值,但每个标签的功能都应实现

<div id="myForm">
    <textarea rows="15" cols="100" id="html">
        <?php 
            echo"<table>
                 <tr>
                     <th>Firstname</th>
                     <th>Lastname</th> 
                     <th>Age</th>
                 </tr>
                 <tr>
                     <td>Jill</td>
                     <td>Smith</td> 
                     <td>50</td>
                 </tr>
                 <tr>
                     <td>Eve</td>
                     <td>Jackson</td> 
                     <td>94</td>
                 </tr>
                 </table>";
         ?>
     </textarea>
 </div> 

 <script type="text/javascript">

     $("#myForm").ready(function(e) {
         var text = $('#html').val();
         var cleanText = text.replace(/(<([^>]+)>)/ig,"");

         $('#html').val(cleanText);
         e.preventDefault();

     });

 </script>

2 个答案:

答案 0 :(得分:1)

如果您使用div而不是textarea,它看起来像这样吗?

$("#myForm").ready(function(e) {
var text = $('#html').val();
//var cleanText = text.replace(/(<([^>]+)>)/ig,"");

$('#html').val(text);

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myForm">
<div  contenteditable="true" id="html">
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th> 
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td> 
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td> 
<td>94</td>
</tr>
</table>

</div>
</div>

答案 1 :(得分:0)

如果您想制作一个可编辑的表,那么您想要拥有的表。看看这个How to make HTML table cell editable?

如果您只想使用表格的网格而不显示表格中的内容,请使用“隐藏”类类型