我正在尝试更改多个textareas值,当用户使用Javascript更改其中一个时(我也不知道如何使用jQuery),它将所有值更改为undefined而不是我想要的值
JSFIDDLE
<div id="frntnd-edtr" class="col-xs-12">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#status" aria-controls="status-tab" role="tab" data-toggle="tab" aria-expanded="true"><i class="material-icons">sms</i><p>حالة</p></a></li>
<li role="presentation" class=""><a href="#post" aria-controls="post" role="tab" data-toggle="tab" aria-expanded="false"><i class="material-icons">description</i><p>مقالة</p></a></li>
<li role="presentation" class=""><a href="#quote" aria-controls="quote" role="tab" data-toggle="tab" aria-expanded="false"><i class="material-icons">format_quote</i><p>اقتباس</p></a></li>
<li role="presentation" class=""><a href="#story" aria-controls="story" role="tab" data-toggle="tab" aria-expanded="false"><i class="material-icons">import_contacts</i><p>قصة قصيرة</p></a></li>
<li role="presentation" class=""><a href="#chapter" aria-controls="chapter" role="tab" data-toggle="tab" aria-expanded="false"><i class="material-icons">receipt</i><p>فصل من رواية</p></a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="status">
<form class="col-xs-12" method="post" action="" wtx-context="839CDBD9-2EB6-4C4D-91C1-AE6F0F27F4A0">
<input type="hidden" name="post-type" value="status" wtx-context="D32E77E0-5799-4D33-B130-85A998170970">
<textarea name="status-content" class="mg-input col-xs-10 col-sm-11" placeholder="ماذا؟"></textarea>
<fieldset class="actions">
<button id="send-status" type="submit" class="col-xs-2 col-sm-1"><i class="material-icons">send</i></button>
</fieldset>
</form>
</div>
<div role="tabpanel" class="tab-pane" id="post">
<form class="col-xs-12" method="post" wtx-context="5083B580-008B-49B2-8185-D02C7F8010E7">
<input type="hidden" name="post-type" value="post" wtx-context="9673EA74-2C4F-4741-A436-8539A9C0636E">
<input name="title" class="mg-input col-xs-10 col-sm-11" placeholder="عنوان المقالة" wtx-context="F56E788D-846C-4148-AD9A-3EAA5FC2B6B0">
<textarea placeholder="ماذا؟" class="mg-input col-xs-10 col-sm-11" name="post-content"></textarea>
<fieldset class="actions">
<button id="send-post" class="col-xs-2 col-sm-1" type="submit"><i class="material-icons">send</i></button>
<button id="drafts-post" class="col-xs-2 col-sm-1 draft"><i class="material-icons">drafts</i></button>
<button id="fullscreen-post" class="col-xs-2 col-sm-1 fullscreen"><i class="material-icons">fullscreen</i></button>
</fieldset>
</form>
</div>
<div role="tabpanel" class="tab-pane" id="quote">
<form class="col-xs-12" method="post" action="" wtx-context="10BDB7C7-8DA0-43AA-84F5-5A9C8D45F3C0">
<input type="hidden" name="post-type" value="quote" wtx-context="00814A57-8974-4C27-A373-C8F1A8573E01">
<textarea name="quote-content" class="mg-input col-xs-10 col-sm-11" placeholder="ماذا؟"></textarea>
<input name="author" class="mg-input col-xs-10 col-sm-11" placeholder="من القائل؟" wtx-context="99078C64-D6B3-49BA-8980-D58A31F8A628">
<fieldset class="actions">
<button id="send-status" type="submit" class="col-xs-2 col-sm-1"><i class="material-icons">send</i></button>
</fieldset>
</form>
</div>
<div role="tabpanel" class="tab-pane" id="story">
<form class="col-xs-12" method="post" wtx-context="3E3A3A33-4C7B-4765-B8AC-06F15B4553E4">
<input type="hidden" name="post-type" value="story" wtx-context="20F97C01-EFA4-4DF8-9F78-B89685553C26">
<input name="title" class="mg-input col-xs-10 col-sm-11" placeholder="اسم القصة" wtx-context="044CD2A5-6596-44D7-865C-F7DC1F27B2F1">
<textarea placeholder="ما الذي حصل؟" class="mg-input col-xs-10 col-sm-11" name="story-content"></textarea>
<fieldset class="actions">
<button id="send-story" class="col-xs-2 col-sm-1" type="submit"><i class="material-icons">send</i></button>
<button id="drafts-story" class="col-xs-2 col-sm-1 draft"><i class="material-icons">drafts</i></button>
<button id="fullscreen-story" class="col-xs-2 col-sm-1 fullscreen"><i class="material-icons">fullscreen</i></button>
</fieldset>
</form>
</div>
<div role="tabpanel" class="tab-pane" id="chapter">
<form class="col-xs-12" method="post" wtx-context="DE08CAC4-64FA-4366-876B-51171A833CD6">
<input type="hidden" name="post-type" value="chapter" wtx-context="0367AE1C-C218-4665-8685-43AEEF1826CB">
<input name="chapter-num" type="number" min="0" step="0.5" class="mg-input col-xs-2 col-sm-2" placeholder="رقم الفصل" wtx-context="DBE69C57-E173-4FC0-82B6-BC6816B04549">
<select name="cat" id="cat" class="postform select2-hidden-accessible" tabindex="-1" aria-hidden="true" wtx-context="E741052F-EAEC-4D08-A160-B81C0B8644FB">
<option value="-1" selected="selected">الرواية</option>
</select><span class="select2 select2-container select2-container--default" dir="ltr" style="width: auto;"><span class="selection"><span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-labelledby="select2-cat-container"><span class="select2-selection__rendered" id="select2-cat-container" title="الرواية">الرواية</span><span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span>
<input name="title" class="mg-input col-xs-10 col-sm-11" placeholder="عنوان الفصل" wtx-context="D7D2E640-302B-46DD-8D63-1B2009BA0198">
<textarea placeholder="ما الذي حصل؟" class="mg-input col-xs-10 col-sm-11" name="chapter-content"></textarea>
<fieldset class="actions">
<button id="send-chapter" class="col-xs-2 col-sm-1" type="submit"><i class="material-icons">send</i></button>
<button id="drafts-chapter" class="col-xs-2 col-sm-1 draft"><i class="material-icons">drafts</i></button>
<button id="fullscreen-chapter" class="col-xs-2 col-sm-1 fullscreen"><i class="material-icons">fullscreen</i></button>
</fieldset>
</form>
</div>
</div>
</div>
var textareas = document.getElementById("frntnd-edtr").getElementsByTagName("textarea"),x;
console.log(textareas);
for (x in textareas) {
textareas[x].oninput = function(){
console.log(textareas[x].value);
for (z in textareas) {
if(z !== x) {
textareas[z].value = textareas[x].value;
console.dir(textareas[x].value);
}
}
};
}
答案 0 :(得分:1)
使用e.target.value:
textareas[x].oninput = function(e){
for (z in textareas) {
if(z !== x) {
textareas[z].value = e.target.value;
}
}
};
答案 1 :(得分:1)
textareas [x]是一种访问已编辑的textarea的错误方法。尝试使用this
关键字。
https://jsfiddle.net/1qgrr3h6/
textareas[x].oninput = function() {
for (z in textareas) {
if(textareas[z] !== this) {
textareas[z].value = this.value;
}
}
};
PS:小心点。 this
有时无法按预期工作。适度使用它。