在javascript中单击按钮时更改文本区域中的文本的方法是什么
What are those ways to change text in textarea when button on click in javascript?
例如,现在我有:
<textarea style='width:100%;height:300px' id='default_file' readonly="readonly">
{$defaultFileContents[0]|escape} // smarty code
</textarea>
但是,我希望它显示等效的内容(例如,单击"下一步"按钮时):
<textarea style='width:100%;height:300px' id='default_file' readonly="readonly">
{$defaultFileContents[1]|escape} // smarty code
</textarea>
以及索引 2、3、4 等。
$defaultFileContents是从 PHP 脚本中检索的字符串数组。
编辑:
{literal}
<script language="javascript" type="text/javascript" src="modules/Yastt/views/tpls/editarea/edit_area/edit_area_full.js"></script>
<script language="javascript" type="text/javascript">
editAreaLoader.init({
id : "default_file" // textarea id
,syntax: "{/literal}{$fileType}{literal}" // syntax to be uses for highgliting
,start_highlight: true // to display with highlight mode on start-up
,allow_toggle: true
,is_editable:false
});
editAreaLoader.init({
id : "translated_file" // textarea id
,syntax: "{/literal}{$fileType}{literal}" // syntax to be uses for highgliting
,start_highlight: true // to display with highlight mode on start-up
,allow_toggle: true
});
{/literal}
</script>
<table><tr><td colspan='2'>
<div style='font-size:18px;font-weight:bold;'>File Edit ({$defaultLang} To {$translatedLang})
</div>
</td></tr>
<tr><td>
<div style='font-size:18px;font-weight:bold;'>{$file}</div>
</td></tr></table>
<textarea style='width:100%;height:300px' id='default_file'>
{$defaultFileContents[0]|escape}
</textarea>
<form method='POST' name='FileEdit' action='index.php'>
<input type='hidden' name='module' value='Yastt'>
<input type='hidden' name='action' value='saveraw'>
<input type='hidden' name='lang' value='{$translatedLang}'>
<input type='hidden' name='file' value='{$file}'>
<input type='submit' value='Save'>
<input type='button' value='Cancel' onclick='document.location.href="index.php?module=Yastt&action=overview&lang={$translatedLang}"'>
<input type='button' value='Copy From Above' onclick='document.getElementById("translated_file").value = decodeURIComponent("{$defaultFileContents[0]|escape:'url'}");'>
<textarea style='width:100%;height:500px' name='rawfile' id='translated_file'>
{$translatedFileContents|escape}
</textarea>
</form>
<br>
</form>
您将如何修改此 tpl 代码?
您需要将消息数组转换为 JavaScript 数组。您可以使用json_encode
使它变得轻而易举:
$message = array( "Message 1", "Message 2", "Message 3" );
// var messages = ["Message 1","Message 2","Message 3"];
printf("var messages = %s;", json_encode( $message ));
接下来,您准备 HTML:
<textarea id="default_file"></textarea><br/>
<button id="advance_text" onclick="advanceMessage()">Next</button>
通常,您会从 JavaScript 方面进行点击绑定,但现在我将保持原样:
// Reference to our textarea, build messages array, set message counter:
var textarea = document.getElementById("default_file");
var messages = [ "First Message", "Second Message", "Third Message" ];
var currMesg = 0;
// Advance to the next message
function advanceMessage() {
textarea.value = messages[ currMesg++ % messages.length ];
}
// Call immediately to load first message
advanceMessage();
小提琴:http://jsfiddle.net/hCMs8/
我会做这样的事情:
我以前没有使用过 smarty,所以做你需要做的任何事情,将你想要的文本从 smarty 变成一个数组。
var text_from_smarty = [ "{$defaultFileContents[0]|escape}", "{$defaultFileContents[1]|escape}"]; // etc
var visible_text_index = 0;
现在,当您点击下一步时,调用如下函数:
function show_next_text(){
document.getElementById('default_file').innerHTML = text_from_smarty[ (visible_text_index++)%text_from_smarty.length ];
}
这是一个jsfiddle:http://jsfiddle.net/6dmFY/
相关文章:
- onkeyup无法动态创建多个文本区域
- 具有所有样式的文本正在复制到可编辑文本区域
- 在文本区域POST后解码JSON
- 在文本区域中使用jQuery.text()保持换行符
- ng在下拉列表和文本区域提交
- 将文本插入光标所在的文本区域
- 离开页面导航后保留文本区域内容
- Javascript-在文本区域中断,但不在段落中中断
- 当选择值x时,Javascript需要在正确的位置显示文本区域,从而循环通过具有选择选项的表单
- 测试文本区域中的特定文本格式
- 文本编辑后,append函数不适用于文本区域
- 如何在ReactJs中链接下拉列表和文本区域
- I'我试图在文本区域中进行特定的输入,调用特定的javascript函数,但没有成功;不起作用
- 使用JSON文件中的变量(字符串)填充文本区域
- JavaScript-如果以前不存在文本,如何从文本区域删除新行
- 如何在php中创建一个函数,该函数与文本区域一起工作,通过输入类似[color:red]的内容来打印具有等效颜色的文本
- 如何为动态创建的文本区域中输入的值更新ng模型
- 延迟高亮显示文本区域中的文本
- 将字母添加到文本区域的末尾
- TinyMCE在新添加的文本区域