编辑文本 用户输入到文本框中的内容

Question

到目前为止，我有这个jsfiddle

。

<p>Click the button to remove http:// and www. from input box belove below:</p>

<textarea id="demo" name="comments" cols="25" rows="5">
    http://www.google.com
</textarea><br>
<input type="submit" value="Submit" button onclick="myFunction(),myFunction2()" />
</form>

<script>
function myFunction()
{
    var str=document.getElementById("demo").innerHTML; 
    var n=str.replace("http://","");
    document.getElementById("demo").innerHTML=n;
}

function myFunction2()
{
    var str=document.getElementById("demo").innerHTML; 
    var m=str.replace("www.","");
    document.getElementById("demo").innerHTML=m;
}
</script>​

它可以很好地处理文本中的pre输入，但不会更改提交的文本。我确信有一个简单的答案，只是我对此还不熟悉，不能解决或找到答案。

- Chumbawamba

Answer 1

你需要使用 textarea 的 .value，而不是 .innerHTML。 .innerHTML 只会查看元素中生成的 HTML。如果用户输入了新内容，源代码不会改变。

但是，值会改变：

document.getElementById("demo").value = ...

在你的fiddle中修复：

http://jsfiddle.net/AbSh2/12/

还有一些要点：

• 你不需要两个函数来完成该操作，因为可以看到它可以只用一个函数实现。
• 你可以使用type='button'代替提交按钮，因为Javascript不关心表单提交（这只在服务器端很重要，它接收POST和GET数据。Javascript无法做到）

你甚至可以进一步简化你的函数而不必到处保存字符串：

function myFunction() {
    var str=document.getElementById("demo").value;
    var n=str.replace("http://","");
    var m=n.replace("www.","");
    document.getElementById("demo").value=m;
}

运行良好。你甚至可以执行

function myFunction() {
    document.getElementById("demo").value = 
        document.getElementById("demo").value.replace("http://","").replace("www.","");
}

但我认为那有点混乱，所以只应该用于学习目的 :)

- Ben

---

非常感谢！也许这是我想学习的东西:D，当你知道如何做时，似乎很容易。 - Chumbawamba

没问题，欢迎来到 Stack Overflow。如果这里的答案解决了您的问题，社区会很感激您将其标记为“已接受”。 :) - Ben