以ä¸ã®å 容ã¯ãå¤ãå 容ã§ãã
æ°ããè¨äºã§æ å ±ã確èªãã¦ãã ããã
http://blog.madapaja.net/entry/2012/05/09/070500
é¸æç¯å²ã®ããã¹ããæä½ããããã®jQueryãã©ã°ã¤ã³ jQuery.selection ãæ¸ããã®ã§ãã¢ãããã¾ããã
IE6ãFireFox3.5ãGoogle Chrome 6ãªã©ä¸»è¦ãªãã©ã¦ã¶ã§ãã§ãã¯æ¸ã¿ã§ãã
ãã¡ã¤ã«ã¯ãã¡ã
http://jquery-selection.googlecode.com/svn/tags/ï¼URLãééã£ã¦ããããè¨æ£ãã¾ããï¼
http://code.google.com/p/jquery-selection/downloads/list (å§ç¸®ãã¡ã¤ã«)
ãã¢ã¯ãã¡ã
ç°¡åãªèª¬æ
- bold;">$.getSelection([mode = 'text']):HTMLããã¥ã¡ã³ãå ã®é¸æãããããã¹ã/HTMLãåå¾ãã
- bold;">getSelection():ããã¹ãããã¯ã¹/ã¨ãªã¢ã®é¸æãããããã¹ããåå¾ãã
- bold;">replaceSelection(text[, caret = 'keep']):ããã¹ãããã¯ã¹/ã¨ãªã¢ã®é¸æãããããã¹ããç½®æãã
- bold;">insertBeforeSelection(text[, caret = 'keep']):ããã¹ãããã¯ã¹/ã¨ãªã¢ã®é¸æãããããã¹ãã®åã«æååãæ¿å ¥ãã
- bold;">insertAfterSelection(text[, caret = 'keep']):ããã¹ãããã¯ã¹/ã¨ãªã¢ã®é¸æãããããã¹ãã®å¾ã«æååãæ¿å ¥ãã
- bold;">getCaretPos():ããã¹ãããã¯ã¹/ã¨ãªã¢ã®é¸æç¯å²ãåå¾ãã
- bold;">setCaretPos(range):ããã¹ãããã¯ã¹/ã¨ãªã¢ã®é¸æç¯å²ãè¨å®ãã
デモãä½µãã¦ã確èªãã ããã
$.getSelection([mode = 'text'])
HTMLããã¥ã¡ã³ãå
ã®é¸æãããããã¹ã/HTMLãåå¾ãã
mode
modeã«ã¯ã'text'ãããã¯'html'ãæå®ãã¾ãã
æå®ããªãã£ãå ´åã¯ã'text'ã¨ãªãã¾ãã
è¿ãå¤
Stringå㧠mode ã«æå®ããå¤ã«ãã£ã¦ãé¸æãããããã¹ãããHTMLããã¹ããè¿ãã¾ãã
getSelection()
ããã¹ãããã¯ã¹/ã¨ãªã¢ã®é¸æãããããã¹ããåå¾ãã
è¿ãå¤
Stringåã§é¸æãããããã¹ããè¿ãã¾ãã
replaceSelection(text[, caret = 'keep'])
ããã¹ãããã¯ã¹/ã¨ãªã¢ã®é¸æãããããã¹ããç½®æãã
text
ç½®æå¾ã®æååãæå®ãã¾ãã
caret
caretã«ã¯'keep'ã'start'ã'end'ã®ãããããæå®ãã¾ãã
æå®ããªãã£ãå ´åã¯ã'keep'ã¨ãªãã¾ãã
- bold;">keep:é¸æç¯å²ãä¿æãã¾ããï¼æå®ããtextãé¸æç¶æ ã¨ãªãã¾ãï¼
- bold;">start:ãã£ã¬ãããé¸æç¯å²ã®æåã«ç§»åãã¾ã
- bold;">end:ãã£ã¬ãããé¸æç¯å²ã®å¾ãã«ç§»åãã¾ã
insertBeforeSelection(text[, caret = 'keep'])
ããã¹ãããã¯ã¹/ã¨ãªã¢ã®é¸æãããããã¹ãã®åã«æååãæ¿å
¥ãã
text
æ¿å ¥ããæååãæå®ãã¾ãã
caret
caretã«ã¯'keep'ã'start'ã'end'ã®ãããããæå®ãã¾ãã
æå®ããªãã£ãå ´åã¯ã'keep'ã¨ãªãã¾ãã
- bold;">keep:é¸æç¯å²ãä¿æãã¾ãã
- bold;">start:ãã£ã¬ãããé¸æç¯å²ã®æåã«ç§»åãã¾ã
- bold;">end:ãã£ã¬ãããé¸æç¯å²ã®å¾ãã«ç§»åãã¾ã
insertAfterSelection(text[, caret = 'keep'])
ããã¹ãããã¯ã¹/ã¨ãªã¢ã®é¸æãããããã¹ãã®å¾ã«æååãæ¿å
¥ãã
text
æ¿å ¥ããæååãæå®ãã¾ãã
caret
caretã«ã¯'keep'ã'start'ã'end'ã®ãããããæå®ãã¾ãã
æå®ããªãã£ãå ´åã¯ã'keep'ã¨ãªãã¾ãã
- bold;">keep:é¸æç¯å²ãä¿æãã¾ãã
- bold;">start:ãã£ã¬ãããé¸æç¯å²ã®æåã«ç§»åãã¾ã
- bold;">end:ãã£ã¬ãããé¸æç¯å²ã®å¾ãã«ç§»åãã¾ã
getCaretPos()
ããã¹ãããã¯ã¹/ã¨ãªã¢ã®é¸æç¯å²ãåå¾ãã
è¿ãå¤
Objectå {start: é¸æéå§ä½ç½®, end: é¸æçµäºä½ç½®} ã§é¸æç¯å²ãè¿ãã¾ãã
ä¾
var pos = $('textarea').getCaretPos(); alert(''+ pos.start + ' ãã ' + pos.end + 'ã¾ã§ãé¸æããã¦ãã¾ãã');
setCaretPos(range)
ããã¹ãããã¯ã¹/ã¨ãªã¢ã®é¸æç¯å²ãè¨å®ãã
range
Objectå {start: é¸æéå§ä½ç½®, end: é¸æçµäºä½ç½®} ã§é¸æç¯å²ãæå®ãã¾ãã
ä¾
var strLen = $('textarea').val().length; // æåæ°ãåå¾ // å ¨ã¦é¸æãã¾ã $('textarea').setCaretPos({ start: 0, // æåãã end : strLen // æå¾ã¾ã§ });
ãã¡ã¤ã«ã¯ãã¡ã
http://jquery-selection.googlecode.com/svn/tags/ï¼URLãééã£ã¦ããããè¨æ£ãã¾ããï¼
http://code.google.com/p/jquery-selection/downloads/list (å§ç¸®ãã¡ã¤ã«)