Travellers Tales

P_BLOG でのスマイリーボタンやタグボタンでの挿入位置

事の発端は、P_BLOG でスマイリーボタンやタグボタンを押したときに、Safari ではカーソル位置に挿入されてほしい文字列が入力済みのテキストのいちばん後ろに追加されてしまうことでした。予期せぬ位置にカーソルが移動してしまうので、微妙に不便です。

同じ事を感じている人は少ないないのでしょう、既に改造されている方もいらっしゃいました。

portal shit! : 投稿画面のタグボタンをカスタマイズ

この改造、およびソースコードを眺めていて気が付いたのですが、Firefox では改造しなくてもカーソル位置に文字列が挿入され、選択テキストがある場合は、ちゃんとそれをタグで挟んでくれるように動作しています。Safari でそれが動かなかった原因は、Safari の JavaScript が selectionStart, selectionEnd をサポートしていなかったことにありました。

selectionStart, selectionEnd はいつからサポートされたか

Safari での selectionStart, selectionEnd を調べてみると、Mac OS 10.4.4 以降ではサポートされていることがわかりました。

Mac OS X 10.4.4に含まれるSafari 2.0.3でFirefoxと同じく、setSelectionRange、selectionStart、selectionEndがサポートされたようです。

早速、P_BLOG のscripts.js を修正してみました。この改造はてっきり Mac OS 10.4.4 以降でしか有効でないのかと思ったら、Mac OS 10.3.9 の Safari でもちゃんと動きます。いつからサポートされていたのでしょうか。

そこで調べてみると、Mac OS 10.3.9 では、Safari Update 1.3.2 を適用することで、selectionStart, selectionEnd がサポートされることがわかりました。（下記引用の強調部分。）

Issues addressed in Safari 1.3.2 Preview :

• window.write in same call chain as window.open failed to write if URL parameter was provided.
• Flash in div with display:none style did not redraw when style was changed to display:block.
• HTMLTableElement.insertRow(n) inserted row at the beginning of the table.
• Setting focus, by tabbing, searching, or with JavaScript will now scroll overflow:auto/scroll/overlay to reveal focused element.
• Preloaded Image objects .src field was not a fully resolved path
• Improved Tidy code for text fields in table cells
• CSS: Content displayed incorrectly in tables with TD style set overflow:hidde
• Some values used with setAttribute() caused the attribute to be removed (null strings vs. empty strings)
• Added support for "before unload" event and onbeforeunload handler
• iframe swallowed events for overlapping elements
• Using Swedish keyboard, page would get downloaded when you type '@' in email field
• Selecting a new radio button did not automatically clear the previous selected (outside <form> element)
• Added Text node support for .SelectionStart and .SelectionEnd
• Prevented adjacent text selection when quickly clicking an image.
• Calling focus on contentEditable block elements now scrolls them into view
• Line-height style settings are now reflected in textarea
• Fixed crash in KJS::Window::clear
• String.replace() does not support a function as a parameter location.replace with dynamically written frameset doesn't change view
• XSLT page in Shift_JIS did not always decode correctly
• Selects are now in the tab order in all keyboard modes
• Fixed crash in inCSSStyleSelector::locateSharedStyle
• Cursor and text in status bar was not always updated when mousing over links in a frame
• Tabs are now treated as whitespace in option element

結局のところ、Mac OS 10.4.x Tiger でも OS 10.3.x Panther でも最新版の Safari (バージョン 2.0.3 または 1.3.2) を使っていれば、selectionStart, selectionEnd を使えることが判明しました。

The OpenDarwin Bugzilla - Bug 3401 にも、OS 10.3 で修正されていると書かれています。

P_BLOG の scripts.js の改造

上記の変更点を受けて、Safari でもカーソル位置にスマイリー記号・タグが挿入されるように改造した scripts.js を公開しました。

Travellers Tale : Downloads : P_BLOG 私家版 scripts.js

追記

P_BLOG 本家でも紹介していただきました。