douou1891 2014-11-17 18:31
浏览 39

(Javascript)将光标位置传递给模态窗口

I have a javascript function that inserts (or wraps) various text at the cursor position when a button is clicked. Options (if needed) for the inserted text are via prompts / alerts.

I'm adding a modal window for the upload section of the form for options, so I can remove the prompts / alerts.

Prior to the modal window, the javascript function knew where to insert the text when the upload "browse" button was clicked.

After the modal window, the js insert function interprets the start position as "0", and inserts the text at the beginning instead of where the cursor was.

Question: How can I pass the cursor position to the modal window for the insert function?

Note:
1. I found Pass javascript to php in modal window and a few others, but they don't seem to apply.
2. This is hand-written (no javascript framework).
3. Code examples are quick-n-dirty to get the idea across, not production.

Form Example (before modal):

<form method="post" enctype="multipart/form-data" />
 <input type="file" id="upfile" name="upfile" onchange="ins('up')" />
 <input type="button" value="Line Break" onclick="ins('<br />')" />
 <input type="button" value="Heading" onclick="ins('<h4>','</h4>')" />
 <textarea id="body" name="text">Some string</textarea>
</form>

Javascript:

function ins(st,en){
 e=document.getElementById('body');
 sel=e.value.substring(e.selectionStart,e.selectionEnd);
 en=(en?en:'');
 switch(st){
  case'up':
  f=document.getElementById('upfile').files[0].name;
  src='<?php echo $dir; ?>/'+f;
  if(f.match(/\.(png|jpg|jpeg|svg|gif|tif|tiff)$/)){
   intro=confirm('OK = Regular Image

Cancel = Intro Image');
   if(!intro)en='</a>';
   img=confirm('OK = Style: Image

Cancel = Style: Thumbnail

');
   alt=prompt('Alt:
');
   if(!alt)return;
   st='<img src="'+src+'" class="'+(img?'image':'thumb')+'" alt="'+alt+'" /\>';
  } else {
   ftxt=prompt('Text:
');
   if(!ftxt)return;
   st='<a href="'+src+'">'+ftxt+'</a>';
  }
  break;
  [...]
 }
 e.value=e.value.substring(0,e.selectionStart)+st+sel+en+e.value.substring(e.selectionEnd,e.value.length);
 e.focus();
}

Form Example (after modal):

<style>
 #up {position:fixed; top:0; right:0; bottom:0; left:0; background:rgba(0,0,0,.3);}
 #up div {width:400px; margin:50px auto 0px; padding:20px; background:#fff;}
</style>

<form method="post" enctype="multipart/form-data" />
 <input type="file" id="upfile" name="upfile" onchange="this.form.submit()" />
 <input type="button" value="Line Break" onclick="ins('<br />')" />
 <input type="button" value="Heading" onclick="ins('<h4>','</h4>')" />
 <textarea id="body" name="text">Some string</textarea>
</form>

if (isset($_FILES['upfile']['tmp_name'])) {
 echo '<form id="up" method="post"><div>';
 if (getimagesize($_FILES['upfile']['tmp_name'])) {
  echo '<input type="checkbox" name="intro" /> Intro Image<br />
  Style:<br />
  <input type="radio" name="style" value="thumb" checked /> Thumbnail<br />
  <input type="radio" name="style" value="image" /> Image<br /><br />
  Alt:<br />
  <input type="text" name="alt" />';
 }
 <input type="submit" value="Upload" /> <input type="submit" value="Cancel" />
 </div></form>';
 if (isset($_POST['Upload'])) {
  if (isset($_POST['style'])) {
   $intro = isset($_POST['intro']) ? '</a>' : '';
   $link = '<img src="'.$dir.'somefilename" class="'.$_POST['style'].'" alt="'.$_POST['alt'].'" />'.$intro;
   echo '<script>ins(\''.$link.'\')</script>';
  }
  // Upload routine.
 }



So, since js is parsed client side; how to pass the cursor position to the modal window for the insert function?

Thanks in advance!

If it is not possible, is there another way (without js framework or ajax)?

  • 写回答

0条回答 默认 最新

    报告相同问题?

    悬赏问题

    • ¥15 多址通信方式的抗噪声性能和系统容量对比
    • ¥15 winform的chart曲线生成时有凸起
    • ¥15 msix packaging tool打包问题
    • ¥15 finalshell节点的搭建代码和那个端口代码教程
    • ¥15 用hfss做微带贴片阵列天线的时候分析设置有问题
    • ¥15 Centos / PETSc / PETGEM
    • ¥15 centos7.9 IPv6端口telnet和端口监控问题
    • ¥20 完全没有学习过GAN,看了CSDN的一篇文章,里面有代码但是完全不知道如何操作
    • ¥15 使用ue5插件narrative时如何切换关卡也保存叙事任务记录
    • ¥20 海浪数据 南海地区海况数据,波浪数据