[英]Append text to textarea with javascript
如何將文本列表附加到文本區域?
<textarea id="alltext"></textarea>
<ol>
<li onclick="addText(Hello')">Hello</li>
<li onclick="addText(World')">World</li>
<li onclick="addText(Earthlings')">Earthlings</li>
</ol>
<script>
var Alltext = "";
function addText(text) {
Alltext += text
}
document.getElementById("alltext").value = Alltext;
</script>
這是非常低效的,因為列表實際上很長。 添加的文本正是我在 HTML 上看到的值,因此無需鍵入兩次,對嗎?
有沒有更好的方法?
通過將onclick
分配給<ol>
來使用事件委托。 然后將event
對象作為參數傳遞,並使用它從單擊的元素中獲取文本。
function addText(event) { var targ = event.target || event.srcElement; document.getElementById("alltext").value += targ.textContent || targ.innerText; }
<textarea id="alltext"></textarea> <ol onclick="addText(event)"> <li>Hello</li> <li>World</li> <li>Earthlings</li> </ol>
請注意,這種傳遞event
對象的方法適用於較舊的 IE 以及 W3 兼容系統。
試試這個:
<!DOCTYPE html>
<html>
<head>
<title>List Test</title>
<style>
li:hover {
cursor: hand; cursor: pointer;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("li").click(function(){
$('#alltext').append($(this).text());
});
});
</script>
</head>
<body>
<h2>List items</h2>
<ol>
<li>Hello</li>
<li>World</li>
<li>Earthlings</li>
</ol>
<form>
<textarea id="alltext"></textarea>
</form>
</body>
</html>
托盤將帶有 html 值的文本添加到 textarea 但它不起作用
價值 :
$(document).on('click', '.edit_targets_btn', function() {
$('#add_edit_targets').modal('show');
$('#add_edit_targets_form')[0].reset();
$('#targets_modal_title').text('Doel bijwerken');
$('#action').val('targets_update');
$('#targets_submit_btn').val('Opslaan');
$('#callcenter_targets_id').val($(this).attr("callcenter_targets_id"));
$('#targets_title').val($(this).attr("title"));
$("#targets_content").append($(this).attr("content"));
tinymce.init({
selector: '#targets_content',
setup: function (editor) {
editor.on('change', function () {
tinymce.triggerSave();
});
},
browser_spellcheck : true,
plugins: ['advlist autolink lists image charmap print preview anchor', 'searchreplace visualblocks code fullscreen', 'insertdatetime media table paste code help wordcount', 'autoresize'],
toolbar: 'undo redo | formatselect | ' + ' bold italic backcolor | alignleft aligncenter ' + ' alignright alignjustify | bullist numlist outdent indent |' + ' removeformat | image | help',
relative_urls : false,
remove_script_host : false,
image_list: [<?php $stmt = $db->query('SELECT * FROM images WHERE users_id = ' . $get_user_users_id); foreach ($stmt as $row) { ?>{title: '<?=$row['name']?>', value: '<?=$imgurl?>/image_uploads/<?=$row['src']?>'},<?php } ?>],
min_height: 250,
branding: false
});
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.