Question

最好使用jquery id，只需点击一下按钮，就可以将输入字段中的书面文本更新为div。

此外，当发生这种情况时，就像该文本一样，它具有预定义的特定文本
“书面文字”
“和PRE的书面文字定义文本”

另一方面，我正在写这篇文章，因为我在思考......像stackoverflow这样的帖子预览也不错。因为单击按钮后显示文本并不重要。当然......哪种方式会更容易......那就是我会选择的......

有什么想法吗？我google了我的屁股，但我想我无法找到正确的搜索词来描述从输入字段发送文本到div与jquery ...

就实际功能gom而言，我真的没有起点，但至少是输入和div。 http://jsfiddle.net/XrBy2/2/

Answer 1

<强>更新

    $(document).ready(function() {

        $('input[type=button]').click(
            function (){update(); }
        );

$('input.clear').click(
        function(){
            $('div.update-here').html("");
        }     
    )

    });

并且对于清除按钮，让课程清除它<input value='clear' class='clear' />

<script src="jquery.js"></script>

<script type="text/javascript">

    var textfront = "some pre defined text";

    var textend = "some pre defined text back";

    $(document).ready(function() {

        $('input[type=button]').click(
            function (){update(); }
        );

    });

    function update()
    {
        $('div.update-here').html(textfront+$('#inputform').val()+textend);
    }

更新在此更改

$('div.update-here').html(textfront+$('#inputform').val()+textend);

$('div.update-here').html(textfront+$('input[name=update]').val()+textend);
</script>

<div class="update">
  <p>Update:</p>

  <input type="text" name="update" id="inputform"/>
  <input type="button" value="update"/>
</div>

<div class="update-here"></div>

<div style="margin: 0px;" class="example">written text</div>
<div class="example">AND THE PRE written DETERMINED TEXT</div>

Answer 2

这是最后添加了清除按钮及其功能。

http://jsfiddle.net/XrBy2/13/

JS

<script type="text/javascript">
    var textfront = "front-";

    var textend = "-back";

    $(document).ready(function() {

        $('.update').click(
            function (){update(); }
        );
        $('.clear').click(
              function (){clear(); }
        );

    });

    function update()
    {
        $('div.update-here').html(textfront+$('.update-it input').val()+textend);
    }
    function clear()
    {
        $('div.update-here').html($(''));
    }
</script>

HTML

<div class="update-it">
  <p>Update:</p>
  <input type="text" name="update" /><input class="update" type="button" value="update" /><input class="clear" type="button" value="clear" />
</div>

<div class="update-here"></div>

和相关的css

.body { font-size: 12px;}

.update-it { border: 1px solid #e1e1e1; padding: 4px 7px 4px 4px; width: 150px; }
.update-it input { width: 100%; }

.example, .update-here { background: #f1f1f1; margin-top: 30px; border: 1px solid #999; padding: 4px 7px 4px 4px; height: 10px; line-height: 10px; }

jQuery - 使用预定文本将输入字段中的文本发送到div

2 个答案: