javascriptで文字入力？

Question

いつもお世話になってます！

今回お聞きしたいのはjavascriptで文字入力の方法です！

今、storys.jpや、mediumのようなUIのテキスト入力画面を作りたいのですが、取っ掛かりの部分がまったくわかりません。

自分の予想では、inputタグを量産して入力フォームを作っていくのではないかと思っていたのですが、ソースを見るとinputタグは全く使っていませんでした。

色々探してみたのですが、方法がわからず、ここに質問させて頂きました。

ただいまjsのフレームワークなど使用しておらず、使っているのはjqueryのみです。
こういうフレームワークが必要かもしれないということがございましたらご教授頂けると幸いです。

Answer 1

見たところHTML5のcontenteditable属性を使っていますね。
これを送信するときや編集したときにtextareaやinputに突っ込んでいたり、
ajaxで中身をそのまま送信していたりという感じじゃないでしょうか。

いずれにしろ今の質問者様の理解度を考えますと、
これと同じような仕組みで動くUIをいきなり作ろうとするのはハードルが高いと思います。

Comments

[MasakazuFukami]

ご回答有難うございます！
理解出来ました！！

確かに難しいかもしれないですが、
とりあえず一回やってみようと思います！！
ありがとうございます！！

Answer 2

ご紹介のページのどの部分を言っているのか、今一つ把握できていません。
http://storys.jp/story/?write=true
の様な部分のお話でしょうか？
ちなみにここの入力ボックスはinputで書かれています。

一応jQueryでもinputを使わずに文字入力する枠等は作ろうと思えば作れますが、inputであっても見た目はCSSでどうとでもできるので、あえてそういったトリッキーな事をする必要がある場面はそうそう無いと思いますよ。

という事でとりあえずの提案ですが、
UIの見た目をいい感じにしたいのであれば、JavascriptよりもCSSで頑張ってみることをお勧めします。

Comments

[MasakazuFukami]

回答有難うございます！

ーーーーーーーーー
http://storys.jp/story/?write=true
の様な部分のお話でしょうか？
ちなみにここの入力ボックスはinputで書かれています。
ーーーーーーーーー

こちらのurlで間違いございません！
またタイトル部分はtextareaで書かれているのを確認したのですが、
本文入力画面はinputで作成されているのでしょうか？？

chromeでconsoleからソースを確認してもinputタグが見受けられません。。。
input自体は隠してあって、jsで表示しているのでしょうか？

理解が浅くて申し訳ございません。
よろしくお願いいたします。