编辑文本框的文本用户输入

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但不会更改提交的文本。我相信有一个简单的答案，我只是新手，无法解决或找到答案。

Answer 1

你需要使用textarea .value，而不是.innerHTML。

.innerHTML只查看元素中生成的 HTML。 如果用户键入新内容，则源不会更改。

但是，该值确实：

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

固定在你的小提琴中：

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.","");
}

但这有点混乱 IMO，所以应该仅用于学习目的:)