convForm
1.0.0
我把這個作為一個副項目開始，它變成了現實，許多人看到了它的不同用途，其用途與它最初的用途完全不同。我可能會在不確定的未來某個時候從頭開始重新做這件事以實現這些可能性，但目前我沒有足夠的時間來處理這個問題，抱歉。如果您想提供任何協助，請隨時開啟拉取請求。
一個將表單轉換為互動式聊天的插件。
特徵：
要建立聊天，只需將表單包裝在元素內，然後在其 jquery 選擇器上呼叫 .convform() 即可。
例子：
$ ( function ( ) {
var convForm = $ ( '.my-conv-form-wrapper' ) . convform ( ) ;
} ) ;為了讓插件知道要問哪個問題，每個輸入和選擇都必須有一個 data-conv-question 屬性。例子：
< select data-conv-question =" Hello! I'm a bot created from a HTML form. Can I show you some features? " >
< option value =" yes " > Yes option >
< option value =" sure " > Sure! option >
select >如果需要，您可以使用管道 | 為每個標籤編寫多個問題。將他們分開。每次產生聊天時，該插件都會隨機選擇一個來使用。例子：
< input type =" text " name =" name " data-conv-question =" Alright! First, tell me your full name, please.|Okay! Please, tell me your name first. " >您可以在輸入上使用正規表示式模式，只需在標籤上使用 data-pattern 屬性即可。當使用者輸入答案時，如果不符合模式，則無法發送答案並且輸入顏色變為紅色。例子：
< input data-conv-question =" Type in your e-mail " data-pattern =" ^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$ " type =" email " name =" email " >您可以分叉對話並根據用戶的回答提出特定問題。這只在從選擇中分叉時才有效。
為此，您需要在要從中分叉對話的問題後面放置一個 div 標籤，並使用帶有選擇名稱的 data-conv-fork 標籤。
在該 div 內，您需要建立帶有 data-conv-case 屬性的 div 標籤，引用將對話分叉到其子元素的答案。
< select name =" programmer " data-conv-question =" So, are you a programmer? (this question will fork the conversation based on your answer) " >
< option value =" yes " > Yes option >
< option value =" no " > No option >
select >
< div data-conv-fork =" programmer " >
< div data-conv-case =" yes " >
< input type =" text " data-conv-question =" A fellow programmer! Cool. " data-no-answer =" true " >
div >
< div data-conv-case =" no " >
< select name =" thought " data-conv-question =" Have you ever thought about learning? Programming is fun! " >
< option value =" yes " > Yes option >
< option value =" no " > No.. option >
select >
div >
div >要使用使用者對問題的回答，您可以在 data-conv-question 標記內使用 {inputname}，其中 inputname 引用您需要答案的問題。如果需要，您可以使用：選擇器（0 索引）從答案中取得特定單字。例如，當您需要使用者的名字時，可以使用 {name}:0，外掛程式將從「name」問題的答案中取得第一個字。例子：
< input type =" text " data-conv-question =" Howdy, {name}:0! It's a pleasure to meet you. How's your day? " >您可以將訊息放入聊天流程中。這些問題不需要用戶給出任何答案，因此插件將立即繼續下一個問題。為此，請在輸入標記上放置 data-no-answer="true" 屬性。例子：
< input type =" text " data-conv-question =" A fellow programmer! Cool. " data-no-answer =" true " >您可以使用自訂函數，當使用者點擊選擇的答案時或在問題結束時呼叫（如果問題需要答案，則會在使用者輸入後呼叫回調。如果沒有，則回調列印訊息後將被呼叫。）。為此，只需將要呼叫的函數的名稱放在選項標籤的「data-callback」屬性中，或放在輸入標籤中：
< select data-conv-question =" Selects also support callback functions. For example, try one of these: " >
< option value =" google " data-callback =" google " > Google option >
< option value =" bing " data-callback =" bing " > Bing option >
select >
< script >
function google ( stateWrapper , ready ) {
window . open ( "https://google.com" ) ;
ready ( ) ;
}
function bing ( stateWrapper , ready ) {
window . open ( "https://bing.com" ) ;
ready ( ) ;
}
script >使用參數stateWrapper和回呼函數ready呼叫回調函數。狀態包裝器是 convForm 對象，ready 是您必須呼叫才能繼續下一個問題的函數。
您可以將選項物件作為參數新增至 convForm 函數，其中包含：
placeHolder ：您希望出現在使用者輸入中的佔位符typeInputUi : 'input' 或 'textarea'，選擇用作使用者輸入的 html 元素的類型timeOutFirstQuestion ：第一個問題之前載入動畫的持續時間（以毫秒為單位）buttonClassStyle ：使用者提交答案按鈕的類eventList ：一個對象，具有在特定時間調用的函數，目前唯一支援的是onSubmitForm （以 convState 作為參數調用函數）和onInputSubmit （以 convState 作為第一個參數調用函數，以及一個就緒的回調函數打印下一個問題作為第二個參數）formIdName : 表單的 html idinputIdName : 使用者輸入的 html idloadSpinnerVisible ：loadSpinner 的類selectInputStyle ： show （預設）、 disable或hide - 告訴外掛程式當問題是select時如何處理輸入欄位。selectInputDisabledText ：當selectInputStyle設定為disable時，在選擇問題的輸入上顯示的文字。 $ ( function ( ) {
var convForm = $ ( '.my-conv-form-wrapper' ) . convform ( {
eventList : {
onSubmitForm : function ( convState ) {
console . log ( 'The form is being submitted!' ) ;
convState . form . submit ( ) ;
}
}
} ) ;
} ) ;請注意，回呼函數是在onInputSubmit函數內部呼叫的。如果您要更改此事件函數，則不需要在 HTML 標記中使用回調函數，但如果由於某種原因確實需要它們，請務必在此處使用window[convState.current.input.callback](convState, readyCallback);
