0

タイトルが示すように、カーソルの位置を範囲の開始点として使用したいと思います。

今、このような簡単なサンプルがあります

<html>
  .
  .
   <p>The quick brown fox jumps over the lazy dog</p>
  .
  .
</html>

undefinedCS/JS 側では、カーソル位置のオフセットを出力しようとするマウス移動に設定されたイベントリッスンがありますが、正しい方法を使用しておらず、いずれかまたはno method errorsを取得してしまいます。

繰り返しますが、私は本当にそれをテストしたかっただけなので、当面は非常に単純な CS です。

$(document).ready ->

  $(document).mousemove ->
    target = event.target
    console.log("#{target.offset()}") // also tried .rangeOffset .offset

range.setStart()理想的には、関数に入力できるものが欲しいです。

たとえば、キツネの f の上にマウスを置いた場合、範囲の開始を so のように設定できるように、オフセットを 16 として返す必要がありますrange.setStart(target,16)。

私を正しい方向に設定する助けがあれば、大歓迎です。

編集：これを入力して送信した後、要素がオフセット情報を返すことを期待するのがいかにばかげているかを理解しました。私はひどく迷っています、私を導いてください。

4

2 に答える 2

0

このように、pageXまたはpageYを使用する必要があります

$(document).ready ->

  $(document).mousemove (e) ->
    console.log("#{e.pageX}")
    console.log("#{e.pageY}")

たとえば、divに相対的な位置を取得する必要がある場合

$(document).ready ->

      $(document).mousemove (e) ->
        console.log("#{e.pageX - $('#divID').offset().left}")
        console.log("#{e.pageY - $('#divID').offset().top}")

あなたのケースに適用すると、このようなものが得られます

$(document).ready ->

  $('p').mousemove (e) ->
    console.log("#{e.pageX - $('p').offset().left}")
    console.log("#{e.pageY - $('p').offset().top}")

テキストを含む段落の上にマウスを移動すると、段落内にマウスの位置が表示されます

ここで動作することを確認してください http://jsfiddle.net/zXnk9/

編集

ホバリングしている文字のインデックスを取得する必要がある場合は、次のようなトリックを使用できます。

テキストの幅とまったく同じコンテナ内にテキストをラップします

<span>The quick brown fox jumps over the lazy dog</span>

そして、次の計算を行います

$(document).ready ->
  // define the container for the text you are intersted in
  container = $('span')
  // on mouseover
  container.mouseover (e) ->
    // get container width
    container_width = container.width()
    // compute the avg character width base on the container width and the number of characters contained in your text. 
    // (If you have some complex formatting inside your container, you would have to adjust this calculation.)
    char_width = p_width / container.text().length
    // get the position of your mouse inside
    position_inside = e.pageX - container.offset().left
    // define the index of the character you are interested in
    char_index = Math.floor(position_inside / char_width) - 1
    // use it as you wish
    // print it for example
    console.log("#{char_index}")

こちらで動作確認できます。キツネのfで正確に試すことができるように、イベントをクリックするように設定しました。16が返されます。 http://jsfiddle.net/zXnk9/1/

編集2：あなたがやろうとしていることを行う信頼できる方法のために

ドキュメントをロードするとき、コンテナ内のすべての文字を次のように html ノードに入れます。

$(document).ready ->
  // set your container
  container = $('span')

  // define a replacement text string
  replacement_container_text = ''
  // iterate over each character inside your container
  $(container.text().split('')).each (i, char) ->
    // put it inside a span and add it to your replacement text string
    replacement_container_text += '<span>' + char + '</span>'

  // set the replacement text string as the html content of your container
  // this replaces the original text with the initial text with each 
  // character wrapped into a span 
  // (which can then be caught as targets for your mousemove events)
  container.html(replacement_container_text)

次に、マウスが置かれている文字のインデックスを次のように取得できます

container.mousemove (e) ->
  range_start = container.children('span').index $(e.target)
  console.log(range_start)

これは、複数行のコンテナや段落などで機能します。

実際の例を参照してくださいhttp://jsfiddle.net/2TBFV/

于 2013-08-25T11:24:52.757 に答える