iapt-platform
/
mint
镜像自地址 https://github.com/iapt-platform/mint.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253
							<!--键入[[显示术语下拉菜单-->
<html>
	<body>
		<style>
			.textarea,
			textarea {
				padding: 0;
				font-family: inherit;
				width: 100%;
				height: 100px;
				resize: vertical;
				font-size: 14px;
				line-height: 1;
				border: 1px solid #ddd;
				white-space: pre-wrap;
				word-break: break-all;
				z-index: 1;
			}
			#text_shadow{
				position: absolute;
				width: 300px;
				visibility: hidden;
			}
			.cursor{
				position: absolute;
				border-left: 1px solid #000;
			}
			#menu{
				width: 200px;
				height:300px;
				background-color: aqua;
				box-shadow: #000;
				position:absolute;
				display: none;
			}
			#menu ul{
				list-style-type: none;
    margin: 0;
    padding: 0;
			}
			#menu .focus{
				color:red;
			}
		</style>

<h2>术语输入测试</h2>
<div style='width:300px;position: relative;'>
<div id="menu"></div>
<div class="textarea" id="text_shadow" >
前端路迹<span class="cursor">&nbsp;</span>
qinshenxue.com
</div>
<textarea>
前端路迹
qinshenxue.com
</textarea>
</div>

<script>
	var menuFocusIndex=0;
	var data=["amanussa","anadhiṭṭhita","anantarāya","anissaṭṭha","aniyata","antaravāsaka"];
	var textarea = document.querySelector('textarea');
	textarea.onkeydown = function (e) {
		textarea.clientHeight
		let menu = document.querySelector('#menu');
		switch (e.key) {
			case "ArrowDown"://down arrow
				if(menu.style.display=="block"){
					menuFocusIndex++;
					if(menuFocusIndex>5){
						menuFocusIndex=5;
					}
					menu.innerHTML=renderMenu({focus:menuFocusIndex});
					return false;					
				}
				break;
			case "ArrowUp"://up arrow
				if(menu.style.display=="block"){
					menuFocusIndex--;
					if(menuFocusIndex<0){
						menuFocusIndex=0;
					}
					menu.innerHTML=renderMenu({focus:menuFocusIndex});
					return false;					
				}
			break;
			case "Enter":
				if(menu.style.display=="block"){
					let value = textarea.value;
					let selectionStart = textarea.selectionStart;
					let str1 = value.slice(0, selectionStart)
					let str2 = value.slice(selectionStart);
					textarea.value = str1+data[menuFocusIndex]+"]]"+str2;
					menu.style.display="none";
					return false;
				}
				else{
					if(!e.shiftKey){
						return false;
					}
				}
				
				break;
			case "Escape":
				e.currentTarget.value="";
				break;
			default:
				break;
		}
	}
	textarea.onkeyup = function (e) {
		let value = textarea.value
		let selectionStart = textarea.selectionStart
		let str1 = value.slice(0, selectionStart)
		let str2 = value.slice(selectionStart)
		let textNode1 = document.createTextNode(str1)
		let textNode2 = document.createTextNode(str2)
		let cursor = document.createElement('span')
		cursor.innerHTML = '&nbsp;'
		cursor.setAttribute('class','cursor')
		let mirror = document.querySelector('.textarea')
		mirror.innerHTML = ''
		mirror.appendChild(textNode1)
		mirror.appendChild(cursor)
		mirror.appendChild(textNode2)
		let menu = document.querySelector('#menu');		
		if(str1.slice(-2)=="[[" && menu.style.display!="block"){
			menuFocusIndex=0;
			menu.innerHTML=renderMenu({focus:0});
			menu.style.display="block";
			menu.style.top=cursor.offsetTop+14;
			menu.style.left=cursor.offsetLeft;
		}

		if(e.key=="Escape"){
			menu.style.display="none";
		}
		
		console.log(keynum);
		console.log(cursor.offsetLeft,cursor.offsetTop)
	}
	function renderMenu(params) {
		
		let html="<ul>";
		let index=0;
		let focusIndex = params.focus%data.length;
		for (const it of data) {
			html +="<li ";
			if(focusIndex==index){
				html +="class='focus' "
			}
			index++;
			html +=">"+index+ ". "+it+"<li>";
		}
		return html;
	}
	/*
	// element:  t.refs.textarea
function getCaretPosition(element) {
  let left;
  let top;
  if (document.selection) {
    element.focus();
    const range = document.selection.createRange();
    left = range.boundingLeft + element.scrollLeft;
    top = range.boundingTop + element.scrollTop;
  } else {
    const SHADOWEDITOR = '__shadow_editor__';
    const SHADOWEDITORTEXT = '__shadow_editor_text__';
    const SHADOWEDITORCARET = '__shadow_editor_caret__';
    const shadowEditor = element[SHADOWEDITOR] || document.createElement('div');
    const shadowEditorCaret = element[SHADOWEDITORCARET] || document.createElement('span');
    const shadowEditorText = element[SHADOWEDITORTEXT] || document.createElement('span');
    let focusOffset = { left: 0, top: 0 };
    if (!element[SHADOWEDITOR]) {
      // add shadpw element to element's cache
      element[SHADOWEDITOR] = shadowEditor;
      element[SHADOWEDITORCARET] = shadowEditorCaret;
      element[SHADOWEDITORTEXT] = shadowEditorText;
      // append shadow to document body
      shadowEditor.appendChild(shadowEditorText);
      shadowEditor.appendChild(shadowEditorCaret);
      document.body.appendChild(shadowEditor);
      // set shadow element's style
      const style = shadowEditor.style;
      const computed = window.getComputedStyle ? getComputedStyle(element) : element.currentStyle;  // currentStyle for IE < 9

      if (element.nodeName != 'INPUT') {
        // only for textarea
        style.whiteSpace = 'pre-wrap';
        style.wordWrap = 'break-word';
      } else {
        style.whiteSpace = 'nowrap';
      }

      style.position = 'absolute';
      style.overflow = 'hidden';
      style.visibility = 'hidden';
      properties.forEach((prop) => {
        style[prop] = computed[prop];
      });

      shadowEditorCaret.textContent = '|';
      shadowEditorCaret.style.cssText = 'display:inline-block;width:0;overflow:hidden;word-wrap:break-word;word-break:break-all;';
    }
    const offset = getElementOffset(element);
    shadowEditor.style.top = `${offset.top}px`;
    shadowEditor.style.left = `${offset.left}px`;
    const index = element.selectionEnd;
    const SHADOWEDITORCONTENT = element.value.substring(0, index);
    shadowEditorText.textContent = SHADOWEDITORCONTENT;

    shadowEditorCaret.style.display = 'inline-block';
    try { focusOffset = getElementOffset(shadowEditorCaret); } catch (e) { }
    shadowEditorCaret.style.display = 'none';
    left = focusOffset.left - element.scrollLeft;
    top = focusOffset.top - element.scrollTop;
    const winOffset = getScrollOffset();
    left -= winOffset.x;
    top -= winOffset.y;
  }
  return {
    left,
    top,
  };
}
	*/

	/*
如果你只是想获得输入框中光标的 offset 的话, 你可以用从 At.js 剥离出来的 jQuery 插件: Caret.js

可以是用AT-JS jquery插件来实现你需要的效果：

下载地址：

http://pan.baidu.com/share/link?shareid=495943&uk=386708086

使用方法：

$("input[name=message]").atWho("@",{
tpl: "<li id='${uid}' data-value='${name}'>${name} <small>${spacenote}</small></li>",
'data':friend_list
});
评论
但是如果你想做，你题目描述的东西的话，还是建议用插件。 这里有一个不错的jquery插件： http://ichord.github.io/At.js/

评论

	*/
</script>

	</body>
</html>