拆分id和文本搜索

multi.html

@@ -1281,9 +1281,14 @@ const teamsCount = 2;
 				<input type="checkbox" class="switch-ipt" name="real-time-change-card" id="real-time-change-card"><label class="switch-lbl" for="real-time-change-card"><circle></circle></label>
 				<button class="open-evolutionary-tree display-none"></button>
 				<button class="search-evolution-by-this display-none"><icon class="type-icon" data-type-icon="0"></icon></button>
-				<form id="form-id-search">
-					<input type="search" id="m-id"/><button type="sumbit" id="search-by-string"></button>
-				</form>
+				<div class="id-string-search">
+					<form id="form-id-search">
+						<input type="number" step="1" min="0" max="99999" id="card-id"  name="card-id"/>
+					</form>
+					<form id="form-string-search">
+						<input type="search" id="search-string" name="search-string" /><button type="sumbit" id="search-by-string"></button>
+					</form>
+				</div>
 				<ul class="evo-card-list"></ul>
 			</div>
 			<div class="setting-row row-mon-latent">

script-universal_function.js

@@ -1052,8 +1052,7 @@ function cardNClick() {
 }
 //技能介绍里的头像的切换
 function changeToIdInSkillDetail(event) {
-	const settingBox = editBox.querySelector(".setting-box");
-	const monstersID = settingBox.querySelector(".row-mon-id #m-id");
+	const monstersID = document.getElementById("card-id");
 	const mid = this.getAttribute("data-cardid");
 	monstersID.value = mid;
 	monstersID.onchange();

script.js

@@ -5311,45 +5311,50 @@ function initialize() {
 	//id搜索
 	editBox.changeMonId = editBoxChangeMonId;
 	
-	function idChange(event)
-	{
+	function idChange(event) {
 		event?.preventDefault();
-		const searchString = monstersID.value;
-		if (/^\d+$/.test(searchString)) { //纯ID
-			const newId = parseInt(searchString, 10);
-			if (editBox.mid != newId) //避免多次运行oninput、onchange
-			{
-				editBox.mid = newId;
-				
-				//图鉴模式记录上一次的内容
-				if (isGuideMod)
+		const formData = new FormData(this);
+		const searchString = formData.get("card-id");
+		const newId = parseInt(searchString, 10);
+		if (editBox.mid != newId) { //避免多次运行oninput、onchange
+			editBox.mid = newId;
+			
+			//图鉴模式记录上一次的内容
+			if (isGuideMod) {
+				const idArr = searchMonList.originalHeads?.map(head=>head.card.id) ?? [];
+				const state = {searchArr:idArr,mid:newId};
+				const locationURL = new URL(location);
+				if (newId === 0) {
+					locationURL.searchParams.delete('id');
+				}else
 				{
-					const idArr = searchMonList.originalHeads?.map(head=>head.card.id) ?? [];
-					const state = {searchArr:idArr,mid:newId};
-					const locationURL = new URL(location);
-					if (newId === 0) {
-						locationURL.searchParams.delete('id');
-					}else
-					{
-						locationURL.searchParams.set('id', newId);
-					}
-					history.pushState(state, null, locationURL);
+					locationURL.searchParams.set('id', newId);
 				}
-
-				editBox.changeMonId(newId);
+				history.pushState(state, null, locationURL);
 			}
-			return true;
-		}else //字符串搜索
-		{
+
+			editBox.changeMonId(newId);
+		}
+	}
+	function search(event) {
+		event?.preventDefault();
+		const formData = new FormData(this);
+		const searchString = formData.get("search-string");
+		if (searchString.length == 0) {
+			showSearch(Cards.filter(card=>card.enabled).slice(-100));
+		} else {
 			showSearch(searchByString(searchString));
-			return false;
 		}
 	}
 
 	const formIdSearch = document.getElementById("form-id-search");
 	formIdSearch.onsubmit = idChange;
-	const monstersID = document.getElementById("m-id");
-	const btnSearchByString = document.getElementById("search-by-string");
+	formIdSearch.onchange = idChange; //让数字快速变化时也改变当前卡片
+	const formStringSearch = document.getElementById("form-string-search");
+	formStringSearch.onsubmit = search;
+	const monstersID = document.getElementById("card-id");
+	// const txtSearchString = document.getElementById("search-string");
+	// const btnSearchByString = document.getElementById("search-by-string");
 	//输入id数字即时更新的开关
 	const realTimeClassName = 'real-time-change-card';
 	const s_realTimeChangeCard = document.getElementById(realTimeClassName);
@@ -6125,7 +6130,7 @@ function editMember(teamNum, isAssist, indexInTeam) {
 
 	const settingBox = editBox.querySelector(".setting-box");
 	const formIdSearch = document.getElementById("form-id-search");
-	const monstersID = document.getElementById("m-id");
+	const monstersID = document.getElementById("card-id");
 	monstersID.value = mon.id > 0 ? mon.id : 0;
 	formIdSearch.onsubmit();
 	//觉醒

solo.html

@@ -1019,9 +1019,14 @@ const teamsCount = 1;
 				<input type="checkbox" class="switch-ipt" name="real-time-change-card" id="real-time-change-card"><label class="switch-lbl" for="real-time-change-card"><circle></circle></label>
 				<button class="open-evolutionary-tree display-none"></button>
 				<button class="search-evolution-by-this display-none"><icon class="type-icon" data-type-icon="0"></icon></button>
-				<form id="form-id-search">
-					<input type="search" id="m-id"/><button type="sumbit" id="search-by-string"></button>
-				</form>
+				<div class="id-string-search">
+					<form id="form-id-search">
+						<input type="number" step="1" min="0" max="99999" id="card-id"  name="card-id"/>
+					</form>
+					<form id="form-string-search">
+						<input type="search" id="search-string" name="search-string" /><button type="sumbit" id="search-by-string"></button>
+					</form>
+				</div>
 				<ul class="evo-card-list"></ul>
 			</div>
 			<div class="setting-row row-mon-latent">

style.css

@@ -1415,19 +1415,36 @@ body:not(.solo) .awoken-icon[data-awoken-icon="64"]::after
 /*.edit-box .setting-box .row-mon-id::before{
 	content: "▼怪物ID";
 }*/
-.edit-box .setting-box .row-mon-id #m-id{
-	box-sizing: border-box;
+.row-mon-id .id-string-search {
+	display: flex;
+	gap: 20px;
+	align-items: baseline;
+}
+.row-mon-id .id-string-search :where(
+	input,
+	button
+) {
 	font-size: 25px;
-	height: 40px;
-	width: calc(100% - 50px);
+	line-height: 25px;
+}
+#form-id-search {
+	flex: 1 1 auto;
+	display: flex;
+}
+#form-string-search {
+	flex: 1 1 auto;
+	display: flex;
 }
-.edit-box .setting-box .row-mon-id #search-by-string{
+#card-id{
 	box-sizing: border-box;
-	font-size: 25px;
-	height: 40px;
-	width: 45px;
-	margin-left: 5px;
-	padding: 0;
+	width: 100%;
+	height: 100%;
+}
+#search-string{
+	flex: 1 1 auto;
+}
+#search-by-string{
+	flex: 0 0 50px;
 }
 .edit-box .setting-box .row-mon-id #search-by-string::before{
 	content: "🔍";

triple.html

@@ -1963,9 +1963,14 @@ const teamsCount = 3;
 				<input type="checkbox" class="switch-ipt" name="real-time-change-card" id="real-time-change-card"><label class="switch-lbl" for="real-time-change-card"><circle></circle></label>
 				<button class="open-evolutionary-tree display-none"></button>
 				<button class="search-evolution-by-this display-none"><icon class="type-icon" data-type-icon="0"></icon></button>
-				<form id="form-id-search">
-					<input type="search" id="m-id"/><button type="sumbit" id="search-by-string"></button>
-				</form>
+				<div class="id-string-search">
+					<form id="form-id-search">
+						<input type="number" step="1" min="0" max="99999" id="card-id"  name="card-id"/>
+					</form>
+					<form id="form-string-search">
+						<input type="search" id="search-string" name="search-string" /><button type="sumbit" id="search-by-string"></button>
+					</form>
+				</div>
 				<ul class="evo-card-list"></ul>
 			</div>
 			<div class="setting-row row-mon-latent">