Designing text input field

[ToanLS (Toan Le)]

Hi Shawn,

Unfortunately, nothing works in your project.
Let me describe my sample in details so you can recreate:

1. Make the input div editable when the scene is activated:

  function onSceneActivated(doc, e) {
    doc.getElement('input').textDom.contentEditable = true;
  }

2. Create input clicked timeline to change the background color, dim the separator line, and show Submit button.
3. Run input clicked timeline when the input shape receives mouse down event for the first time:

  function onInputMouseDown(doc, e) {
    if (this.userClicked)
      return;
    this.userClicked = true;
    doc.getTimeline('input clicked').start();
  }

4. Get text inputted, say thank you, hide submit button when submit button is clicked

  function onSubmitClicked(doc, e) {
    var inputDom = doc.getElement('input').textDom;
    // get text input
    var textInput = inputDom.innerText;
    // show thank you
    inputDom.contentEditable = false;
    inputDom.innerHTML = 'Thank you!';
    inputDom.style.textAlign = 'center';
    // hide elements
    doc.getElement('line').show(false);
    this.show(false);
}

5. Use CSS to make input field expand when typing:

  .group {
    border-radius: 10px;
    padding: 10px 20px;
    box-sizing: border-box;
    height: auto !important;
  }
  .group div {
    position: static !important;
    width: auto !important;
    height: auto !important;
  }
  .input {
    min-height: 1.2em;
  }
  .group div.line {
    height: 2px !important;
    margin-bottom: 10px;
  }
  .submit p {
    margin: 0;
  }

Regards