Question

我正在尝试制作一个简单的字体生成器来应对挑战。我要编辑的表单元素是标签。

该网页的工作方式是用户在“输入文本框”中键入内容，按三个按钮之一，新文本将以用户选择的字体显示在“输出文本框”中。

这是我的HTML外观：

<div id=“inputContainer”>
    <p id=“inputText style=“text-decoration:underline;position:relative;”>Input</p>
    <textarea id=“input” rows=“10” columns=“10”></textarea>
</div>
<div id=“outputContainer”>
    <p id=“outputText” style=“text-decoration:underline;position:relative;”>Output</p>
    <textarea id=“output” rows=“10” columns=10”></textarea>
</div>

这是我的jQuery / JS：

var inputText = $("#input").html();
    $("#monospaceButton").click(function() {
    $("#output").html(inputText);
});

仅当我在标签（innerHTML）之间手动添加文本时，该功能才起作用。当用户在代码输出（网站）中输入文本区域时，“输出”文本区域将没有输出。

感谢您的帮助。如果需要进一步说明，请告诉我。谢谢！

Answer 1

$("#button1").click(function() {
                var value = $("#input").val();
                $("#output").css('font-family', 'serif');
                $("#output").val(value);
            });
            $("#button2").click(function() {
                var value = $("#input").val();
                $("#output").css('font-family', 'monospace');
                $("#output").val(value);
            });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
            <p id="inputText" style="text-decoration:underline;position:relative;">Input</p>
            <textarea id="input" rows="3" columns="10"></textarea>
        </div>
        <button id="button1">Style 1</button>
        <button id="button2">Style 2</button>
        <div>
            <p id="outputText" style="text-decoration:underline;position:relative;">Output</p>
            <textarea id="output" rows="3" columns="10"></textarea>
        </div>

您如何在jQuery中编辑HTML表单元素？

1 个答案: