jquery或javascript - 將文本從文本編輯器添加到變量中

我有一個名爲「title」的文本框和表示內容的文本編輯器窗口。我有這個JavaScript變量：jquery或javascript - 將文本從文本編輯器添加到變量中

var article = {"title" : "I am a title", "content" : "I am the content"};

我必須承認，我從來沒有碰見這種之前在JavaScript數組的，這就是爲什麼我需要幫助。

這裏是我的HTML頁面的代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
... 
<script type="text/javascript"> 
     var article = {"title" : "I am a title", "content" : "I am the content"}; 
    </script> 


</head> 
<body> 
    <form name="myForm" method="post"> 
     <label>Title:</label><br /> 
     <input id="myTitle"></input><br /><br /> 
     <label>Content:</label><br /> 
     <textarea id="myContent" name="myContent" rows="15" cols="80" style="width: 80%"> 
</textarea><br /><br /> 
     <input type="submit" value="save" /> 
    </form> 
</body> 
</html>

我需要添加到網頁的功能是這樣的：

當頁面加載時，把在標題文本框和文本區域內（文本編輯器所在的位置）文章變量中的值（本例中標題中爲「我是標題」，編輯器中爲「我是內容」）。
一旦我改變了這些文本框和textarea中的值，變量本身應該更新爲我寫的內容。

對我來說不幸的是，我從來沒有碰到過這種變量，所以我會很樂意提供一些指導。

來源

2012-12-27 DanielY

這就是所謂的_object_。你有什麼嘗試？你有什麼麻煩？ – SLaks

我試圖尋找幫助，並放棄了我可以在這裏得到最好的一種。老實說，我不知道從哪裏開始。 – DanielY

可能有幫助：https：//developer.mozilla.org/en-US/docs/JavaScript/Guide/Working_with_Objects –

試試這個：

var article = { 
    "title": "I am a title", 
    "content": "I am the content" 
}; 

$('#myTitle').val(article.title); 
$('#myContent').val(article.content); 

$('#target').click(function() { 
    article.title = $('#myTitle').val(); 
    article.content = $('#myContent').val(); 
    alert(article.title + '\n' + article.content); 
    return false; 
});

DEMO HERE

來源

2012-12-27 15:54:01

它在我的頁面中不起作用，但是在它的演示中卻沒有。任何想法？ – DanielY

好吧，你是否將'id'設置爲提交按鈕作爲'target'？ –

我已經設置了'id'這樣的''inputtype =「submit」value =「save」id =「target」/>'... –

如果你唯一的問題是「如何使用object」。你可以使用它：

var title = article.title; 
var content = article.content;

來源

2012-12-27 15:48:53

這是一個不錯的選擇，使用淘汰賽。首先，我會建議您閱讀淘汰賽的文檔：http://knockoutjs.com/documentation/introduction.html

要跟蹤對象狀態，您應該使用ko.observable。將下面的代碼添加到頁面底部：

<script type="text/javascript"> 
     var article = { 
      title: ko.observable("I am a title"), 
      content: ko.observable("I am the content") 
     }; 

    ko.applyBindings(article); 
</script>

和更新的形式如下：

<form name="myForm" method="post"> 
    <label>Title:</label><br /> 
    <input id="myTitle" data-bind="value: title"></input> 
    <br /><br /> 
    <label>Content:</label><br /> 
    <textarea id="myContent" data-bind="value: content" name="myContent" rows="15" cols="80" style="width: 80%"> 
</textarea><br /><br /> 
    <input type="submit" value="save" /> 
</form>

這裏是工作提琴：http://jsfiddle.net/8gJAZ/

編輯：

也不要不要忘記添加對淘汰賽庫的參考。

<script src='http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.0.js' type='text/javascript'></script>

來源

2012-12-27 15:51:58

由於某種原因，我的頁面無法正常工作 – DanielY

您是否參考了knockout.js？ –

現在我做了，它的工作:)謝謝！但是當我點擊「保存」時，它會回到相同的初始值。爲什麼？ – DanielY

我更喜歡使用封閉用於這一目的。您可以使用點語法在以下注釋中使用公共成員。您可能還想要擴展和添加功能。

var Article = (function() { 

    var title = ""; 
    var content = ""; 

    function setOrUpdateValues(t, c) { 
     title = (t !== null) ? t : title; 
     content = (c !== null) ? c : content; 
    } 

    function getValues() { 
     return { 
      title: title, 
      content: content 
     } 
    } 

    function setTitle(t) { 
     title = t; 
    } 

    function setContent(c) { 
     content = c; 
    } 

    function getTitle() { 
     return title; 
    } 

    function getContent() { 
     return content; 
    } 

    // public members 
    return { 
     title: title, 
     content: content, 
     getValues: getValues, 
     setOrUpdateValues: setOrUpdateValues, 
     updateTitle: setTitle, 
     updateContent: setContent, 
     getTitle: getTitle, 
     getContent: getContent 
    } 
}()); 


// usage 

Article.setOrUpdateValues("title", "content"); 

printValues(); 

Article.updateTitle("updated title"); 

printValues(); 

Article.setOrUpdateValues(null, "newContent"); 

printValues(); 

function printValues() { 
    var values = Article.getValues(); 
    console.log("title: " + values.title + ", content: " + values.content); 
}

來源

2012-12-27 16:23:20

jquery或javascript - 將文本從文本編輯器添加到變量中

回答

相關問題