如何将<input />字母替换为其他字母onclick?

时间:2017-04-26 17:09:01

标签: java html replace replacewith letters

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

例如: John Smith&gt; Juhn Smith (将'o'改为'u'制作Juhn Smith) 或 John Smith&gt;罗恩史密斯 (改变整个词)

我已经尝试过查看字符串和replacewith()等,但是很难找到任何适合使用输入框的东西。

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

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

由于

1 个答案:

答案 0 :(得分:0)

@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>