如何将 <input> 字母替换为其他字母 onclick？答案

【问题标题】：How do i replace <input> letters with other letters onclick?如何将 <input> 字母替换为其他字母 onclick？
【发布时间】：2017-09-24 05:31:51
【问题描述】：

我希望能够在框中输入单词或名称，单击生成按钮并将一些字母或单词更改为新框。

例如：约翰·史密斯 > 朱恩·史密斯（将 'o' 更改为 'u' 制作 Juhn Smith）或约翰·史密斯 > 罗恩·史密斯（改变整个单词）

我尝试过查看字符串和 replacewith() 等，但很难找到任何合适的东西，尤其是使用输入框什么都没有。

这是一个接近我的意思但更复杂的例子：

http://anu.co.uk/brazil/

谢谢

【问题讨论】：

到目前为止你做了什么？
感谢您回来。到目前为止只有这个... 输入你的名字：
John Smith

试试

标签： java html replace replacewith letters

【解决方案1】：

@James 寻求帮助时，下次尝试自己做。这是一个显示您的示例的 HTML 页面。将此保存为 myPage.html。然后在浏览器中打开文件。

<!DOCTYPE html>
<html>
<meta charset="ISO-8859-1">
<head>
<title>Replace web page</title>
</head>
<script type="text/javascript" >
    // this gets called by pressing the button
    function myFunction() {
        var first = document.getElementById("foreName");
        var last = document.getElementById("lastName");
        // now change 'o' to 'u' for each name part
        var changedFirst = myChange(first.value);
        var changedLast = myChange(last.value);
        // now move it to another element
        var resultBox = document.getElementById("resultBox");
        resultBox.innerHTML = "" + changedFirst + " " + changedLast;
        }

    // this is a function to search a string and replace with a substitute
    function myChange(str) {
        var arr = str.split('');
        var result = "";
        for(var i=0; i < arr.length; i++) {
            if (arr[i] == 'o')  // if it's an o
                result += 'u';  // replace it with 'u'
            else 
                result += arr[i];
        }
    return(result);
}
</script>
<body>
    <p> This is an example of inputting text, changing it, then displaying it into another item</p>
    First Name:  <input type="text" name="foreName" id="foreName" maxlength=100 value="">
    Last Name:   <input type="text" name="lastName" id="lastName" maxlength=100 value="">
  <p>
      <input type="button" id="inButton" name="inButton" value="Click Me" onclick="myFunction()" >
   </p>

<p>
 <textarea rows="1" cols="50" id="resultBox"></textarea> 
</p>

</body>
</html>

【讨论】：