如何：包含 2 个文本字段的页面，点击按钮时替换字符

Question

我自己不是开发人员，尽管 html 和 css 对我来说有点熟悉，但 php 和更高级的语言不是，所以请多多包涵

我想要一个简单的 html 页面（或 php 或本例所需的任何内容），其中包含 2 个文本字段和一个按钮

我想要的是将文本粘贴到字段 1 中，当我点击“转换”按钮时，它会转换某些字符并将其显示在字段 2 中。

示例：我在字段 1 中粘贴 "I wanna go for a walk in the park"。点击转换，字段 2 将显示 "I w@nn@ go for @ w@lk in the p@rk"

（我知道这是一个愚蠢的例子，但只是为了让你明白我想要实现的目标）。

我现在只需要它来转换1个单个字符，所以基本上只有1个"variable"。

希望成功，你们可以帮助我。

谢谢，注意安全！蒂亚戈

Answer 1

html 文件

<input id="input_data" type="text">

<button id="convert">Convert</button>

<div>
      <h1>Output</h1>
      <p id="output"></p>
</div>

<script type="text/javascript">

      document.getElementById("convert").onclick = function(){
            var input = document.getElementById("input_data").value;

            // your choice
            var convert_from = "a";
            var convert_to = "o";
            var finalString = (input.split(convert_from.toUpperCase()).join(convert_to.toUpperCase())).split(convert_from).join(convert_to);
            document.getElementById("output").textContent = finalString;
            copyToClipboard(finalString);
      }

      // You can copy some text to clipboard only by selecting an element
      function copyToClipboard(content){
            // Create a textarea
            var textHolder = document.createElement('textarea');
            // Assign the value
            textHolder.value = content;
            // Appent the textarea to body
            document.body.appendChild(textHolder);
            // "Focus the action" on the textHolder
            textHolder.select();
            textHolder.setSelectionRange(0, 99999); /*For mobile devices*/
            // Copy the content from selected element
            document.execCommand('copy');
            // Remove the textarea from body
            document.body.removeChild(textHolder);
      }
</script>

希望对您有所帮助！ ^_&

如何：包含 2 个文本字段的页面，点击按钮时替换字符

How to: page with 2 text fields, replace character when hitting button

text

replace

paste