2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

テキストボックスの内容をツイートしたい

Last updated at Posted at 2019-06-23

初めてWebページを作ってみました。

試合の速報をツイートで行う学校が多く、ミスなく簡単に呟けたらいいなと思い作成しました
http://www.greeeeeeeen.com/sokuhou/sokuhoumaker.html
この時にツイートページにテキスト内容を反映するのに苦労したので記録します

直接ツイートするのはAPIなどで少し難しそうだったので、
まずはツイート内容をテキストボックスに反映して、それをツイートページに乗せることを考えました

##利用したツイートボタン設置のコード

<a href="http://twitter.com/share?text=[ツイートする内容]" target="_blank">tweet</a>

検索してこちらを利用したのですが、__改行ができない__ので非常に困っていました。
そこで改行コード「%0D%0A」が改行を反映する時に使われていることに気づき、以下の様に作成してみました

HTML

            <textarea id = "tweetBox"
                      placeholder="ここにツイート内容が出ます"
                      name="tweet_box"
                      onkeyup="GetTweet(value)"
                      cols="40"
                      rows="8"></textarea>
       		<span id = "TWEET">
				<a class="button" href="https://twitter.com/intent/tweet?text=" target="_blank" >Tweet</a>
			</span>

JavaScript

function GetTweet(str,code){
   var target = document.getElementById("HELLO");
  var text_all = document.getElementById("tweetBox");
  var input_data = text_all.value.replace(/\r?\n/g, '%0D%0A');
  TWEET.innerHTML = '<a class="button" href="https://twitter.com/intent/tweet?text=' + input_data + '" target="_blank">Tweet</a>'

文字を打つごとにテキストがツイートページに反映されるようにURLを変更しているのですが
その時に改行である\r、\nを全て「%0D%0A」に変換することで改行した内容もツイートページに反映できるようになりました

2
2
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?