整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
hp開發(fā)問題日志——selectpage 使用
最近修改fastadmin的selectpage，想用js動(dòng)態(tài)修改選中值，查找文檔，百度搜索都沒有結(jié)果，有知道的大神可以留言，告訴我方法，不勝感謝。
在找解決方法時(shí)，看到一個(gè)屬性searchField：查詢關(guān)鍵字字段。fastadmin中，并沒有這個(gè)屬性，但是原生的有，我找了一下fastadmin的selectpage.js文件，搜索了詞條searchField，找到這個(gè)地方
SelectPage.prototype.setOption=function (option) {
修改了里面的內(nèi)容：
SelectPage.prototype.setOption=function (option) {
//use showField to default
//option.searchField=option.searchField || option.showField;
let search_field=option.searchfield || option.searchField || option.showField;
if(Array.isArray(search_field)){
var arr=['searchField'];
for (var i=0; i < arr.length; i++) {
option[arr[i]]=this.strToArray(option[arr[i]]);
}
}else{
option.searchField=search_field.split(',');
}
console.log(option);
option.andOr=option.andOr.toUpperCase();
if (option.andOr !=='AND' && option.andOr !=='OR') option.andOr='AND';
//support multiple field set然后在view中html中添加了data-searchField="mobile,username,nickname"，這樣的效果就是可以輸入一個(gè)關(guān)鍵詞，用or搜索三個(gè)字段；html代碼：
<input id="c-user_id" data-rule="required" data-source="user/user/index" data-params='{"custom[agent_type]":0}' data-field="username"
data-searchField="username,nickname,mobile" class="form-control selectpage" name="row[user_id]" type="text" value="">控制器的selectpage方法的相關(guān)代碼：
$logic=$andor=='AND' ? '&' : '|';
$searchfield=is_array($searchfield) ? implode($logic, $searchfield) : $searchfield;
$searchfield=str_replace(',', $logic, $searchfield);
$word=array_filter(array_unique($word));
if (count($word)==1) {
$query->where($searchfield, "like", "%" . reset($word) . "%");
} else {
$query->where(function ($query) use ($word, $searchfield) {
foreach ($word as $index=> $item) {
$query->whereOr(function ($query) use ($item, $searchfield) {
$query->where($searchfield, "like", "%{$item}%");
});
}
});從控制器中的代碼看，searchfield是可以為數(shù)組的；
參數(shù)傳遞的效果：
同時(shí)發(fā)送三個(gè)搜索字段
TML 的 select 標(biāo)簽是網(wǎng)頁開發(fā)人員構(gòu)建交互式下拉列表的強(qiáng)大工具。它允許用戶從預(yù)定義的選項(xiàng)列表中進(jìn)行選擇，使表單輸入更加高效且用戶友好。在本文中，我們將全面探索 select 標(biāo)簽的各種可能性，揭秘一些提高表單功能和用戶體驗(yàn)的技巧。
select 標(biāo)簽的基本語法
select 標(biāo)簽的基本語法如下：
<select>
<option value="value1">選項(xiàng) 1</option>
<option value="value2">選項(xiàng) 2</option>
<option value="value3">選項(xiàng) 3</option>
</select>
在這個(gè)例子中，select 標(biāo)簽定義了下拉列表，而 option 標(biāo)簽定義了列表中的選項(xiàng)。每個(gè) option 標(biāo)簽都有一個(gè) value 屬性，表示選項(xiàng)的值，以及顯示給用戶的文本。
自定義選項(xiàng)
select 標(biāo)簽提供了多種屬性來自定義選項(xiàng)：
來看一個(gè)帶有默認(rèn)選中和禁用選項(xiàng)的例子：
<select>
<option value="apple">蘋果</option>
<option value="banana" selected>香蕉</option>
<option value="orange" disabled>橙子</option>
</select>
在這個(gè)例子中，"香蕉" 選項(xiàng)將被默認(rèn)選中，而 "橙子" 選項(xiàng)將被禁用。
增強(qiáng) select 標(biāo)簽
select 標(biāo)簽可以通過多種方式進(jìn)行增強(qiáng)，以提高用戶體驗(yàn)：
來看一個(gè)帶有多個(gè)選中的例子：
<select multiple>
<option value="apple">蘋果</option>
<option value="banana">香蕉</option>
<option value="orange">橙子</option>
</select>
在這個(gè)例子中，用戶可以選擇多個(gè)水果選項(xiàng)。
樣式化 select 標(biāo)簽
雖然 select 標(biāo)簽的樣式化受到瀏覽器限制，但你仍然可以使用 CSS 來一定程度地美化它：
來看一個(gè)添加自定義樣式的例子：
<style>
select {
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
select:hover {
border-color: #007bff;
}
</style>
<select>
<option value="option1">選項(xiàng) 1</option>
<option value="option2">選項(xiàng) 2</option>
</select>
在這個(gè)例子中，我們使用 CSS 為 select 標(biāo)簽添加了內(nèi)邊距、邊框和圓角，并在懸停時(shí)改變邊框顏色。
結(jié)論：打造動(dòng)態(tài)選擇體驗(yàn)
HTML select 標(biāo)簽為網(wǎng)頁開發(fā)人員提供了創(chuàng)建動(dòng)態(tài)選擇體驗(yàn)的強(qiáng)大工具。通過結(jié)合選項(xiàng)自定義、增強(qiáng)功能和樣式化技術(shù)，你可以創(chuàng)建出高效、直觀且視覺吸引人的下拉列表。不斷探索 select 標(biāo)簽的無限可能，讓你的網(wǎng)頁表單更加充滿活力和互動(dòng)性！釋放你的創(chuàng)造力，打造令人難忘的用戶選擇體驗(yàn)！
當(dāng)用戶進(jìn)行鼠標(biāo)框選選擇了頁面上的內(nèi)容時(shí)，把選擇的內(nèi)容進(jìn)行上報(bào)。
雖然這需求就一句話的事，但是很顯然，沒那么簡單...
因?yàn)槭髽?biāo)框選說起來簡單，就是選擇的內(nèi)容，但是這包含很多中情況，比如：只選擇文案、選擇圖片、選擇輸入框、輸入框中的內(nèi)容選擇、iframe、等。
簡單總結(jié)，分為以下幾點(diǎn)：
鼠標(biāo)框選包含以下幾點(diǎn)：
老生常談的技術(shù)點(diǎn)了，這里不能用節(jié)流，因?yàn)榭隙ú荒苣闶髽?biāo)選擇的時(shí)候，隔一段時(shí)間返回一段內(nèi)容，肯定是選擇之后一起返回。
這里用 debounce 主要也是用在事件監(jiān)聽和事件處理上。
事件監(jiān)聽，因?yàn)槭髽?biāo)選擇，不僅僅是鼠標(biāo)按下到鼠標(biāo)抬起，還包括雙擊、右鍵、全選。
需要使用事件監(jiān)聽對(duì)事件作處理。
Range 接口表示一個(gè)包含節(jié)點(diǎn)與文本節(jié)點(diǎn)的一部分的文檔片段。
Range 是瀏覽器原生的對(duì)象。
<body>
<ul>
<li>Vite</li>
<li>Vue</li>
<li>React</li>
<li>VitePress</li>
<li>NaiveUI</li>
</ul>
</body>
<script>
// 創(chuàng)建 Range 對(duì)象
const range=new Range()
const liDoms=document.querySelectorAll("li");
// Range 起始位置在 li 2
range.setStartBefore(liDoms[1]);
// Range 結(jié)束位置在 li 3
range.setEndAfter(liDoms[2]);
// 獲取 selection 對(duì)象
const selection=window.getSelection();
// 添加光標(biāo)選擇的范圍
selection.addRange(range);
</script>可以看到，選擇內(nèi)容為第二行和第三行
只選擇 li 中的 itePres
可以看出 range 屬性對(duì)應(yīng)的值
const range=document.createRange();const range=window.getSelection().getRangeAt(0)if (document.caretRangeFromPoint) {
range=document.caretRangeFromPoint(e.clientX, e.clientY);
}const range=new Range()Selection 對(duì)象表示用戶選擇的文本范圍或插入符號(hào)的當(dāng)前位置。它代表頁面中的文本選區(qū)，可能橫跨多個(gè)元素。
window.getSelection()錨指的是一個(gè)選區(qū)的起始點(diǎn)（不同于 HTML 中的錨點(diǎn)鏈接）。當(dāng)我們使用鼠標(biāo)框選一個(gè)區(qū)域的時(shí)候，錨點(diǎn)就是我們鼠標(biāo)按下瞬間的那個(gè)點(diǎn)。在用戶拖動(dòng)鼠標(biāo)時(shí)，錨點(diǎn)是不會(huì)變的。
選區(qū)的焦點(diǎn)是該選區(qū)的終點(diǎn)，當(dāng)你用鼠標(biāo)框選一個(gè)選區(qū)的時(shí)候，焦點(diǎn)是你的鼠標(biāo)松開瞬間所記錄的那個(gè)點(diǎn)。隨著用戶拖動(dòng)鼠標(biāo)，焦點(diǎn)的位置會(huì)隨著改變。
范圍指的是文檔中連續(xù)的一部分。一個(gè)范圍包括整個(gè)節(jié)點(diǎn)，也可以包含節(jié)點(diǎn)的一部分，例如文本節(jié)點(diǎn)的一部分。用戶通常下只能選擇一個(gè)范圍，但是有的時(shí)候用戶也有可能選擇多個(gè)范圍。
一個(gè)用戶可編輯的元素（例如一個(gè)使用 contenteditable 的 HTML 元素，或是在啟用了 designMode 的 Document 的子元素）。
首先要清楚，選擇的起點(diǎn)稱為錨點(diǎn)(anchor)，終點(diǎn)稱為焦點(diǎn)(focus)。
function debounce (fn, time=500) {
let timeout=null; // 創(chuàng)建一個(gè)標(biāo)記用來存放定時(shí)器的返回值
return function () {
clearTimeout(timeout) // 每當(dāng)觸發(fā)時(shí)，把前一個(gè) 定時(shí)器 clear 掉
timeout=setTimeout(()=> { // 創(chuàng)建一個(gè)新的 定時(shí)器，并賦值給 timeout
fn.apply(this, arguments)
}, time)
}
}/**
* debounce 函數(shù)類型
*/
type DebouncedFunction<F extends (...args: any[])=> any>=(...args: Parameters<F>)=> void
/**
* debounce 防抖函數(shù)
* @param {Function} func 函數(shù)
* @param {number} wait 等待時(shí)間
* @param {false} immediate 是否立即執(zhí)行
* @returns {DebouncedFunction}
*/
function debounce<F extends (...args: any[])=> any>(
func: F,
wait=500,
immediate=false
): DebouncedFunction<F> {
let timeout: ReturnType<typeof setTimeout> | null
return function (this: ThisParameterType<F>, ...args: Parameters<F>) {
// eslint-disable-next-line @typescript-eslint/no-this-alias
const context=this
const later=function () {
timeout=null
if (!immediate) {
func.apply(context, args)
}
}
const callNow=immediate && !timeout
if (timeout) {
clearTimeout(timeout)
}
timeout=setTimeout(later, wait)
if (callNow) {
func.apply(context, args)
}
}
}nterface IGetSelectContentProps {
type: 'html' | 'text'
content: string
}
/**
* 獲取選擇的內(nèi)容
* @returns {null | IGetSelectContentProps} 返回選擇的內(nèi)容
*/
const getSelectContent=(): null | IGetSelectContentProps=> {
const selection=window.getSelection()
if (selection) {
// 1. 是焦點(diǎn)在 input 輸入框
// 2. 沒有選中
// 3. 選擇的是輸入框
if (selection.isCollapsed) {
return selection.toString().trim().length
? {
type: 'text',
content: selection.toString().trim()
}
: null
}
// 獲取選擇范圍
const range=selection.getRangeAt(0)
// 獲取選擇內(nèi)容
const rangeClone=range.cloneContents()
// 判斷選擇內(nèi)容里面有沒有節(jié)點(diǎn)
if (rangeClone.childElementCount > 0) {
// 創(chuàng)建 div 標(biāo)簽
const container=document.createElement('div')
// div 標(biāo)簽 append 復(fù)制節(jié)點(diǎn)
container.appendChild(rangeClone)
// 如果復(fù)制的內(nèi)容長度為 0
if (!selection.toString().trim().length) {
// 判斷是否有選擇特殊節(jié)點(diǎn)
const isSpNode=hasSpNode(container)
return isSpNode
? {
type: 'html',
content: container.innerHTML
}
: null
}
return {
type: 'html',
content: container.innerHTML
}
} else {
return selection.toString().trim().length
? {
type: 'text',
content: selection.toString().trim()
}
: null
}
} else {
return null
}
}
/**
* 判斷是否包含特殊元素
* @param {Element} parent 父元素
* @returns {boolean} 是否包含特殊元素
*/
const hasSpNode=(parent: Element): boolean=> {
const nodeNameList=['iframe', 'svg', 'img', 'audio', 'video']
const inpList=['input', 'textarea', 'select']
return Array.from(parent.children).some((node)=> {
if (nodeNameList.includes(node.nodeName.toLocaleLowerCase())) return true
if (
inpList.includes(node.nodeName.toLocaleLowerCase()) &&
(node as HTMLInputElement).value.trim().length
)
return true
if (node.children) {
return hasSpNode(node)
}
return false
})
}/**
* 獲取框選的文案內(nèi)容
* @returns {string} 返回框選的內(nèi)容
*/
const getSelectTextContent=(): string=> {
const selection=window.getSelection()
return selection?.toString().trim() || ''
}// 是否時(shí)鼠標(biāo)點(diǎn)擊動(dòng)作
let selectionchangeMouseTrack: boolean=false
const selectionChangeFun=debounce(()=> {
const selectContent=getSelectContent()
console.log('selectContent', selectContent)
// todo... 處理上報(bào)
selectionchangeMouseTrack=false
})
// 添加 mousedown 監(jiān)聽事件
document.addEventListener('mousedown', ()=> {
selectionchangeMouseTrack=true
})
// 添加 mouseup 監(jiān)聽事件
document.addEventListener(
'mouseup',
debounce(()=> {
selectionChangeFun()
}, 100)
)
// 添加 selectionchange 監(jiān)聽事件
document.addEventListener(
'selectionchange',
debounce(()=> {
if (selectionchangeMouseTrack) return
selectionChangeFun()
})
)
// 添加 dblclick 監(jiān)聽事件
document.addEventListener('dblclick', ()=> {
selectionChangeFun()
})
// 添加 contextmenu 監(jiān)聽事件
document.addEventListener(
'contextmenu',
debounce(()=> {
selectionChangeFun()
})
)也可以進(jìn)行封裝
/**
* addEventlistener function 類型
*/
export interface IEventHandlerProps {
[eventName: string]: EventListenerOrEventListenerObject
}
let selectionchangeMouseTrack: boolean=false
const eventHandlers: IEventHandlerProps={
// 鼠標(biāo) down 事件
mousedown: ()=> {
selectionchangeMouseTrack=true
},
// 鼠標(biāo) up 事件
mouseup: debounce(()=> selectionChangeFun(), 100),
// 選擇事件
selectionchange: debounce(()=> {
if (selectionchangeMouseTrack) return
selectionChangeFun()
}),
// 雙擊事件
dblclick: ()=> selectionChangeFun(),
// 右鍵事件
contextmenu: debounce(()=> selectionChangeFun())
}
Object.keys(eventHandlers).forEach((event)=> {
document.addEventListener(event, eventHandlers[event])
})function debounce (fn, time=500) {
let timeout=null; // 創(chuàng)建一個(gè)標(biāo)記用來存放定時(shí)器的返回值
return function () {
clearTimeout(timeout) // 每當(dāng)觸發(fā)時(shí)，把前一個(gè) 定時(shí)器 clear 掉
timeout=setTimeout(()=> { // 創(chuàng)建一個(gè)新的 定時(shí)器，并賦值給 timeout
fn.apply(this, arguments)
}, time)
}
}
let selectionchangeMouseTrack=false
document.addEventListener('mousedown', (e)=> {
selectionchangeMouseTrack=true
console.log('mousedown', e)
})
document.addEventListener('mouseup', debounce((e)=> {
console.log('mouseup', e)
selectionChangeFun()
}, 100))
document.addEventListener('selectionchange', debounce((e)=> {
console.log('selectionchange', e)
if (selectionchangeMouseTrack) return
selectionChangeFun()
}))
document.addEventListener('dblclick', (e)=> {
console.log('dblclick', e)
selectionChangeFun()
})
document.addEventListener('contextmenu',debounce(()=> {
selectionChangeFun()
}))
const selectionChangeFun=debounce(()=> {
const selectContent=getSelectContent()
selectionchangeMouseTrack=false
console.log('selectContent', selectContent)
})
const getSelectContent=()=> {
const selection=window.getSelection();
if (selection) {
// 1. 是焦點(diǎn)在 input 輸入框
// 2. 沒有選中
// 3. 選擇的是輸入框
if (selection.isCollapsed) {
return selection.toString().trim().length ? {
type: 'text',
content: selection.toString().trim()
} : null
}
// 獲取選擇范圍
const range=selection.getRangeAt(0);
// 獲取選擇內(nèi)容
const rangeClone=range.cloneContents()
// 判斷選擇內(nèi)容里面有沒有節(jié)點(diǎn)
if (rangeClone.childElementCount > 0) {
const container=document.createElement('div');
container.appendChild(rangeClone);
if (!selection.toString().trim().length) {
const hasSpNode=getSpNode(container)
return hasSpNode ? {
type: 'html',
content: container.innerHTML
} : null
}
return {
type: 'html',
content: container.innerHTML
}
} else {
return selection.toString().trim().length ? {
type: 'text',
content: selection.toString().trim()
} : null
}
} else {
return null
}
}
const getSpNode=(parent)=> {
const nodeNameList=['iframe', 'svg', 'img', 'audio', 'video']
const inpList=['input', 'textarea', 'select']
return Array.from(parent.children).some((node)=> {
if (nodeNameList.includes(node.nodeName.toLocaleLowerCase())) return true
if (inpList.includes(node.nodeName.toLocaleLowerCase()) && node.value.trim().length) return true
if (node.children) {
return getSpNode(node)
}
return false
})
}*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
