Javascript 如何获取所见即所得HTML5的内部html_Javascript_Jquery_Javascript Events

Javascript 如何获取所见即所得HTML5的内部html

javascript jquery

Javascript 如何获取所见即所得HTML5的内部html,javascript,jquery,javascript-events,Javascript,Jquery,Javascript Events,我有两个wysihtml5字段出现在一个页面上。我希望能够使用class=“vLargeTextField wysihtml5编辑器”中的文本实时更新textareaclass=“vLargeTextField”，反之亦然。如果我更新id=“user\u input”class=“vLargeTextField wysihtml5编辑器”则id=“user\u input”class=“vLargeTextField”应更新相应的输入我试着做了以下几件事： Userinput1 = $(".w

我有两个wysihtml5字段出现在一个页面上。我希望能够使用

class=“vLargeTextField wysihtml5编辑器”

中的文本实时更新textarea

class=“vLargeTextField”

，反之亦然。如果我更新

id=“user\u input”

class=“vLargeTextField wysihtml5编辑器”

则

id=“user\u input”

class=“vLargeTextField”

应更新相应的输入

我试着做了以下几件事：

Userinput1 = $(".wysihtml5-sandbox").contents().find("body").html()

如果我在屏幕上只有一个编辑器，效果会很好。它返回

user\u input

，但如果我更新

user\u input2

，则代码不会使用类似的行。另外，如果我更新了

user\u input

或

user\u input2

，我想用user\u input 1或2的输入更新相应的

class=“vLargeTextField wysihtml5 editor”

在此方面的任何帮助都将不胜感激。请参阅下面的代码

<div name="newboxes" id="user_input" class="text">
    <div style="display:inline-block">
<textarea class="vLargeTextField" cols="80" id="user_input" name="results" rows="20" style="width: 640px; height: 200px; margin: 0px auto; display: none;"></textarea>    
    <iframe class="wysihtml5-sandbox" security="restricted" allowtransparency="true" frameborder="0" width="0" height="0" marginwidth="0" marginheight="0" style="background-color: rgb(255, 255, 255); border-collapse: separate; border: 0.9090908765792847px solid rgb(204, 204, 204); clear: none; display: inline-block; float: none; margin: 0px auto; outline: rgb(85, 85, 85) none 0px; outline-offset: 0px; padding: 3.9914772510528564px 5.994318008422852px; position: static; top: auto; left: auto; right: auto; bottom: auto; z-index: auto; vertical-align: middle; text-align: start; box-sizing: content-box; -webkit-box-shadow: rgba(0, 0, 0, 0.0745098) 0px 0.9090908765792847px 0.9090908765792847px 0px inset; box-shadow: rgba(0, 0, 0, 0.0745098) 0px 0.9090908765792847px 0.9090908765792847px 0px inset; border-top-right-radius: 3.9914772510528564px; border-bottom-right-radius: 3.9914772510528564px; border-bottom-left-radius: 3.9914772510528564px; border-top-left-radius: 3.9914772510528564px; width: 640px; height: 200px;"></iframe>

    #document
        <html>
        <body marginwidth="0" marginheight="0" contenteditable="true" class="vLargeTextField wysihtml5-editor" spellcheck="true" style="background-color: rgb(255, 255, 255); color: rgb(85, 85, 85); cursor: auto; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 13.63636302947998px; font-style: normal; font-variant: normal; font-weight: normal; line-height: 20px; letter-spacing: normal; text-align: start; text-decoration: none; text-indent: 0px; text-rendering: auto; word-break: normal; word-wrap: break-word; word-spacing: 0px;">
        "Some Text Here"
        </body>
        </html>
    </div>
</div>

<div name="newboxes" id="user_input2" class="text">
    <div style="display:inline-block">
    <textarea class="vLargeTextField" cols="80" id="user_input2" name="results" rows="20" style="width: 640px; height: 200px; margin: 0px auto; display: none;"></textarea>
    <iframe class="wysihtml5-sandbox" security="restricted" allowtransparency="true" frameborder="0" width="0" height="0" marginwidth="0" marginheight="0" style="background-color: rgb(255, 255, 255); border-collapse: separate; border: 0.9090908765792847px solid rgb(204, 204, 204); clear: none; display: inline-block; float: none; margin: 0px auto; outline: rgb(85, 85, 85) none 0px; outline-offset: 0px; padding: 3.9914772510528564px 5.994318008422852px; position: static; top: auto; left: auto; right: auto; bottom: auto; z-index: auto; vertical-align: middle; text-align: start; box-sizing: content-box; -webkit-box-shadow: rgba(0, 0, 0, 0.0745098) 0px 0.9090908765792847px 0.9090908765792847px 0px inset; box-shadow: rgba(0, 0, 0, 0.0745098) 0px 0.9090908765792847px 0.9090908765792847px 0px inset; border-top-right-radius: 3.9914772510528564px; border-bottom-right-radius: 3.9914772510528564px; border-bottom-left-radius: 3.9914772510528564px; border-top-left-radius: 3.9914772510528564px; width: 640px; height: 200px;"></iframe>

    #document
        <html>
        <body marginwidth="0" marginheight="0" contenteditable="true" class="vLargeTextField wysihtml5-editor" spellcheck="true" style="background-color: rgb(255, 255, 255); color: rgb(85, 85, 85); cursor: auto; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 13.63636302947998px; font-style: normal; font-variant: normal; font-weight: normal; line-height: 20px; letter-spacing: normal; text-align: start; text-decoration: none; text-indent: 0px; text-rendering: auto; word-break: normal; word-wrap: break-word; word-spacing: 0px;">
        "Some Text Here"
        </body>
        </html>
    </div>
</div>


#文件
“这里有一些文字”
#文件
“这里有一些文字”

你的问题回答了我的问题。在您的例子中，我刚刚在jQuery选择器中添加了一个ID

Userinput = $("#user_input .wysihtml5-sandbox").contents().find("body").html()
Userinput1 = $("#user_input1 .wysihtml5-sandbox").contents().find("body").html()

因此，您有两个具有相同类名的iframe，并且您正试图从这两个iframe中获取html？如@ryanc1256所指出的。如果您有两个具有相同.className的iframe，请在jQuery中使用each（），否则，请分别通过id来确定iframe的目标。或者，另一种方法是，如果您没有任何其他iframe，请使用iframe:nth child（1）在jQuery中。。。“罗伯特所说的两种方法都会很好地发挥作用，而且可能不会那么令人困惑……”ryanc1256是的，这正是我想要做的。但是我只想用html来更新相关的文本区域。keyup@user1462141这是我的解决方案。。。只要把身份证都贴上。。。