input和div聚焦，再選擇下拉框，將選擇的資料動態新增到聚焦處

阿新 • • 發佈：2021-01-13

效果圖

在這裡插入圖片描述

程式碼塊

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		label {
			display: inline-block;
			width: 150px;
			text-align: right;
		}

		.theme { 

			width: 65.6%;
		}
		
		select {
			width: 150px;
		}

		.emailContent {
			display: inline-block;
			resize: none;
			width: 65.6%;
			height: 130px;
			border: 1px solid rgb(118, 118, 118);
			padding: 2px;
			margin-top: 20px;
		}
	</style>
	<body>
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js" 
></script>
		<div>
			<label>主題：</label><input type="text" name="name" value="" id="theme" class="theme input" />
			<select class="select" onchange="selectChange(value)">
				<option value="" 
>請選擇</option>
				<option value="0">提案機構</option>
				<option value="1">提案人</option>
				<option value="2">專利卷號</option>
				<option value="3">申請號</option>
				<option value="4">專利名稱</option>
				<option value="5">內部名稱</option>
			</select>
		</div>
		<div>
			<label>郵件內容：</label>
			<div contenteditable=true class="emailContent input" id="emailContent"></div>
		</div>

		<script type="text/javascript">
			var lastInput = null;
			$(function() {
				//滑鼠聚焦後獲取對應的 html標籤
				var inputs = document.getElementsByClassName("input");
				for (i = 0; i < inputs.length; i++) {
					inputs[i].onfocus = function() {
						lastInput = this;
					}
				}
			});


			function selectChange(m) {
				//獲取下拉框中要增加的變數
				var themeText = $(".select option:selected").text();

				//去重(通過indexOf，判斷主題和郵件內容中是否存在，若不存在則增加，若存在不增加);
				var themeIndex = $("#theme").val().indexOf("{" + themeText + "}");
				var emailContentIndex = $("#emailContent").html().indexOf("{" + themeText + "}");
				if(lastInput != null){
					if (lastInput.id == "theme") { //給主題動態增加內容
						lastInput.focus();
						if (m != "" && themeIndex == -1) {
							lastInput.value = lastInput.value.substr(0, lastInput.selectionStart) + "{" + themeText + "}" + lastInput.value.substring(
								lastInput.selectionStart, lastInput.value.length);
						} else {}
					} else if (lastInput.id == "emailContent") { //給郵件內容動態增加內容
						if (m != "" && emailContentIndex == -1) {
							insertHtmlAtCaret("{" + themeText + "}");
						} else {}
					}					
				}else{
					alert("請聚焦")
				}

			}



			//div 游標處動態增加內容	
			function insertHtmlAtCaret(html) {
				var sel, range;
				if (window.getSelection) {
					sel = window.getSelection();
					if (sel.getRangeAt && sel.rangeCount) {
						range = sel.getRangeAt(0);
						range.deleteContents();

						var el = document.createElement("div");
						el.innerHTML = html;
						var frag = document.createDocumentFragment(),
							node, lastNode;
						while ((node = el.firstChild)) {
							lastNode = frag.appendChild(node);
						}
						range.insertNode(frag);
						if (lastNode) {
							range = range.cloneRange();
							range.setStartAfter(lastNode);
							range.collapse(true);
							sel.removeAllRanges();
							sel.addRange(range);
						}
					}
				} else if (document.selection && document.selection.type != "Control") {
					document.selection.createRange().pasteHTML(html);
				}
			}
		</script>
	</body>
</html>

input和div聚焦，再選擇下拉框，將選擇的資料動態新增到聚焦處

技術標籤：筆記html5cssjavascript 效果圖程式碼塊 <!DOCTYPE html> <html> <head>

表單校驗（選擇下拉框，input變化不影響校驗）

選擇下拉框時型別不同，但是可以只在當前型別中點選“立即建立”，不影響下一型別的校驗

Element-ui 自定義下拉框，實現選擇圖片並且回顯圖片

template：  <el-select v-model=\"scope.row.mark\" style=\"width: 100%;\" placeholder=\"請選擇\" @change=\"changeSelection(scope)\":ref=\"\'select\'+scope.$inde

《SeleniumBasic 3.141.0.0 - 在VBA中操作瀏覽器》系列文章之六：多選下拉框的自動選擇和反選

<html> <body> <div>你去過那些地方？</div> <br /> <select name=\"調查\" multiple=\"multiple\" size=\"8\">

axure rp9 自定義下拉框，文字同步顯示

1、這是最終效果： https://blog.csdn.net/u012062810 2、拉一個文字框單行、下拉圖示，組個組；

Spring boot - 控制層跳轉到前端頁面（HTML）時根據自動設定頁面下拉框的預設選擇項（如：下拉框自動選擇性別為“男”或“女”）

一、說明：本文內容主要是幫助一些朋友解決：當跳轉到一個新的網頁時，在該新網頁上的下拉框控制元件會自動選擇你想要它選擇的選項。例如：你在跳轉到一個新頁面時，該頁面的性別下拉框自動選擇好“男”或“

基於iview的table元件render函式功能動態渲染雙向繫結的選擇下拉框

iview table元件的render函式功能是封裝vue的純函式元件得到的所以用法和vue render函式基本但入參稍有不同

Vue實現省市區三級聯動，下拉框，簡單易懂

技術標籤：vuevue 效果圖：程式碼： <!DOCTYPE html> <html> <head> <meta charset="GBK">

jquery實現戶籍地選擇下拉框

利用jquery實現戶籍地選擇下拉框的具體程式碼，供大家參考，具體內容如下 data.js

RF新手常見問題總結-(彈出框，下拉框，單、多選等操作)

1. 經常有人問這個元素找不到，一般先排除這兩個地方，再自己找找A：是否等待了足夠的時間讓元素載入 (增加sleep xx, wait Until xxx)B:仔細查查，這個元素是否進入到另一個frame了 (select frame xxx)上面兩點都確

ABAP 螢幕下拉框值根據選擇框填值賦值

DATA:nameTYPEvrm_id,listTYPEvrm_values,valueLIKELINEOFlist. DATAlt_itab5TYPETABLEOFdynpread.DATAls_itab5TYPEdynpread.DATAl_kunagTYPElikp-kunag.ls_itab5-fieldname=\'S_KUNAG\'.APPENDls_itab5TOlt_itab5.