创建一个可以更改文本值的文本框 [英] create a textbox that will change value of a text

问题描述

如何创建一个文本框，用户输入的值将更改其下方另一个文本的结果。



示例

< pre lang =html> < 表格 >
< 输入 类型 = text value = >
< 输入 type = 按钮 value = 应用 >
< / form >
< p > 值为< 值 > < / p >

点击应用按钮时<值GT;将打印用户提供的值。

解决方案

你必须使用 JavaScript [ ^ ]为此。

1. 首先，包装< value> ; 在 span 标记中，并为元素提供ID。这样您就可以从JavaScript轻松访问它们：
   
   

    <  表格 >  
    <   input     type   =  text    value   =     id   =  inputTxt  >  
    <   input    类型  = 按钮   值  = 应用    id   =  applyBtn >  
    <   / form  >  
    <   p  > 值为<   span     id   =  value >  [value] <   / span  >  <   / p  >  

   
   
   

2. 然后，添加< script> 标记到 head 标记，并将JavaScript代码放在那里。代码将为您的按钮添加一个单击事件处理程序，当单击该按钮时，它将从文本框中获取文本并将其放在段落中的 span 中：
   
   

    <   script    类型  =  text / javascript >  
     window  .onload =  function （）{
     document  .getElementById（  applyBtn）。onclick =  function （）{
     var  txt =  document  .getElementById（  inputTxt ）。值; 
     document  .getElementById（  value).textContent = txt; 
   }; 
   }; 
    <   /   script  >  

   
   
   

更多信息JavaScript代码中使用的方法：

• document.getElementById [ ^ ]
• window.onload [ ^ ]
• onclick [ ^ ]
• textContent [ ^ ]

解决方案1解释了您可以做什么。这种操作的一种便捷方式是使用jQuery。



首先，您可以使用选择器获取HTML元素的jQuery包装器：

http://api.jquery.com/category/selectors [ ^ ]。



For例如，给定解决方案1中的 id 属性，您可以获得

  var  input = 

（ #inputTxt< /跨度>）;
var button =

how to create a textbox where users enter a value that will change the result of another text below it.

example

<form>
<input type="text" value="">
<input type="button" value="Apply" >
</form>
<p>The Value is <value></p>

when the apply button is clicked the <value> will print the value provided by user.

解决方案

You have to use JavaScript[^] for that.

1. First, wrap the <value> in a span tag and give IDs to the elements. That way you can easily access them from JavaScript:
   

   <form>
   <input type="text" value="" id="inputTxt">
   <input type="button" value="Apply" id="applyBtn">
   </form>
   <p>The Value is <span id="value">[value]</span></p>

   
   

2. Then, add a <script> tag to your head tag, and put the JavaScript code in there. The code will add a click event handler to your button, and when the button is clicked, it will fetch the text from the textbox and put it in the span in the paragraph:
   

   <script type="text/javascript">
   window.onload = function() {
       document.getElementById("applyBtn").onclick = function() {
           var txt = document.getElementById("inputTxt").value;
           document.getElementById("value").textContent = txt;
       };
   };
   </script>

   
   

More information on the used methods in the JavaScript code:

• document.getElementById[^]
• window.onload[^]
• onclick[^]
• textContent[^]

Solution 1 explains what you can do. A convenient way for such manipulation would be using jQuery.

First, you can get the jQuery wrappers of the HTML elements using selectors:
http://api.jquery.com/category/selectors[^].

For example, given the id attributes from Solution 1, you can get

var input =

("#inputTxt"); var button =

这篇关于创建一个可以更改文本值的文本框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！