通过单击链接向文本输入添加内容。
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了通过单击链接向文本输入添加内容。相关的知识,希望对你有一定的参考价值。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Title</title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.min.js"></script> </head> <body> <h1>Approach 1</h1> <a id="td_msg">Click <b>here</b></a> <input type="text" id="target" /> <script type="text/javascript"> /* Always use the 'document ready' code with jQuery. Here's why: http://docs.jquery.com/How_jQuery_Works#Launching_Code_on_Document_Ready */ $(document).ready(function(){ /* This script will REPLACE the input's content every time you click on the link. */ $('#td_msg').click(function(){ // Whenever the user clicks on the link with id 'td_msg', var thisValue = $(this).text(); // store the text inside of this link as a string value, var thisTarget = $('#target'); // store the target element that you want to manipulate, thisTarget.val(thisValue); // and finally assign the link's content as the value of the text input. return false; // This line will prevent the default link behavior. }); }); </script> <hr /> <h1>Approach 2</h1> <a id="td_msg2">Click <b>here</b></a> <input type="text" id="target2" /> <script type="text/javascript"> $(document).ready(function(){ /* This script will APPEND the input's content every time you click on the link. */ $('#td_msg2').click(function(){ // Whenever the user clicks on the link with id 'td_msg2', var thisValue = $(this).text(); // store the text inside of this link as a string value, var thisTarget = $('#target2'); // store the target element that you want to manipulate, var targetVal = thisTarget.val(); // store the target element's value, thisTarget.val(targetVal+' '+thisValue); // and finally assign the link's content as the value of the text input. return false; // This line will prevent the default link behavior. }); }); </script> </body> </html>
以上是关于通过单击链接向文本输入添加内容。的主要内容,如果未能解决你的问题,请参考以下文章