doutao1282 2014-08-04 20:59
浏览 26
已采纳

从Web窗体创建代码片段（易于剪切和粘贴）[关闭]

I'd like a staff of non-developers to be able to enter text into 4-5 fields in a form (date, time, price, description) then have a box at the bottom of the page that shows custom HTML code with their answers automatically embedded, so they can cut-and-paste the HTML.

Alternatively, send the form to a second page but display it as HTML source code HTML that they can Select All, Cut, then Paste into another app.

Thanks.

text [form field]

name: [bob]
price: [50]
description: [come to our event]
url for event: [url.com/event-02]

<html>
<p class="name">bob</p>
<p class="price">50</p>
<p class="desc">come to our event</p>
<p class="url">Share the <a href="url.com/event-02">event with your friends</a></p> 
</html>

This way they don't have to mess with HTML.

  • 写回答

2条回答 默认 最新

  • dtdvbf37193 2014-08-04 21:15
    关注

    something like this, using val() to get the input from the user:

    HTML:

    name:<input type="text" id="name" />
<br />
price:<input type="text" id="price"/>
<br />
description:<input type="text" id="description"/>
<br />
url for event:<input type="text" id="url_for_event" />
<br />
<button id="create-html">create html</button>

<div id="result"></div>

    JS:

    $( "#create-html" ).click(function() {
    var name = '<p class="name">' + $("#name").val() + '</p>';
    var price = '<p class="price">' + $("#price").val() + '</p>';
    var description = '<p class="desc">' + $("#description").val() +'</p>';
    var url_for_event = '<p class="url">Share the <a href="' + $("#url_for_event").val() +'">event with your friends</a></p>';
    $( "#result" ).text(name + price + description + url_for_event);
});

    demo: http://jsfiddle.net/cLK7z/2/

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

悬赏问题

  • ¥15 关于#java#的问题，请各位专家解答！
  • ¥15 急matlab编程仿真二阶震荡系统
  • ¥20 TEC-9的数据通路实验
  • ¥15 ue5 .3之前好好的现在只要是激活关卡就会崩溃
  • ¥50 MATLAB实现圆柱体容器内球形颗粒堆积
  • ¥15 python如何将动态的多个子列表，拼接后进行集合的交集
  • ¥20 vitis-ai量化基于pytorch框架下的yolov5模型
  • ¥15 如何实现H5在QQ平台上的二次分享卡片效果？
  • ¥30 求解达问题（有红包）
  • ¥15 请解包一个pak文件