整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
elect中option跳轉(zhuǎn)問題
在現(xiàn)在很多網(wǎng)頁中都有用到select下拉框，一般用來展示一些信息并進(jìn)行跳轉(zhuǎn)。
雖然跳轉(zhuǎn)很簡單，只用設(shè)置其value就可以進(jìn)行網(wǎng)頁的跳轉(zhuǎn)，但是很多人會(huì)忽略一個(gè)問題，當(dāng)我們的用戶點(diǎn)擊其中一個(gè)option進(jìn)行跳轉(zhuǎn)過后，若網(wǎng)頁沒有刷新，用戶再次點(diǎn)擊時(shí)將不會(huì)進(jìn)行跳轉(zhuǎn)。
這是因?yàn)槲覀円话愣际鞘褂胦nchange事件，當(dāng)option改變時(shí)就引發(fā)當(dāng)前option的跳轉(zhuǎn)。當(dāng)我們點(diǎn)擊跳轉(zhuǎn)過后，select中的值就會(huì)默認(rèn)選中當(dāng)前跳轉(zhuǎn)的option的值。當(dāng)我們?cè)俅芜x擇之前的option點(diǎn)擊時(shí)，網(wǎng)頁將會(huì)認(rèn)為option的內(nèi)容并沒有改變，所以不會(huì)觸發(fā)onchange事件，將不會(huì)進(jìn)行跳轉(zhuǎn)。
解決方法：
1.用戶再次點(diǎn)擊之前，刷新網(wǎng)頁，使得select恢復(fù)到默認(rèn)狀態(tài)，用戶再次點(diǎn)擊就可以進(jìn)行跳轉(zhuǎn)。
2.用戶再次點(diǎn)擊之前，先點(diǎn)擊另外一個(gè)option，然后再次點(diǎn)擊想要跳轉(zhuǎn)的option即可進(jìn)行跳轉(zhuǎn)。
3.顯然前兩種方法不采取的，對(duì)于用戶的體驗(yàn)太差。我們可以在select添加一個(gè)默認(rèn)樣式，并設(shè)置成“selected”，如：
當(dāng)用戶點(diǎn)擊了觸發(fā)onchange事件的同時(shí)，將select的第一個(gè)option的selected的值設(shè)為true即可，當(dāng)用戶想再次點(diǎn)擊時(shí)，select已經(jīng)恢復(fù)成默認(rèn)樣式，這樣再點(diǎn)擊剛剛那個(gè)option就可以生效，實(shí)現(xiàn)跳轉(zhuǎn)。功能代碼如下：
一篇文章Stimulus：連接HTML和JavaScript的橋梁，實(shí)現(xiàn)簡單的controller，并學(xué)習(xí)了Stimulus是如何連接HTML與JavaScript的。現(xiàn)在我們使用Stimulus來實(shí)現(xiàn)復(fù)制文本到粘貼板的按鈕。
比如說，我們現(xiàn)在有一個(gè)需求，就是幫助用戶生成密碼，在密碼旁邊放置一個(gè)按鈕，點(diǎn)擊按鈕后密碼就被拷貝到粘貼板上了，這樣就方便用戶使用這個(gè)密碼了。
打開public/index.html，修改body內(nèi)容，填充一個(gè)簡單的按鈕，如下：
<div>
PIN: <input type="text" value="1234" readonly>
<button>Copy to Clipboard</button>
</div>下一步，創(chuàng)建src/controllers/clipboard_controller.js，然后添加一個(gè)copy()方法：
import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
copy() {
}
}然后，給div添加data-controller=“clipboard”。只要是給元素添加了data-controller屬性，Stimulus就會(huì)連接一個(gè)controller實(shí)例。
<div data-controller="clipboard">我們還需要一個(gè)對(duì)輸入框的引用，這樣我們就可以在調(diào)用粘貼板API之前獲取輸入框的內(nèi)容。給文本框添加data-clipboard-target=“source“：
PIN: <input data-clipboard-target="source" type="text" value="1234" readonly>在controller中定義一個(gè)target，然后就可以通過this.sourceTarget訪問文本框了。
import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
static targets = [ "source" ]
copy() {
}
}解釋一下這個(gè)targets：
當(dāng)Stimulus加載你的controller類時(shí)，它會(huì)查看靜態(tài)數(shù)組targets的字符串元素，對(duì)于每一個(gè)字符串，Stimulus會(huì)在controller中添加3個(gè)屬性。在這里，對(duì)于“source”，會(huì)添加如下屬性：
this.sourceTarget 在controller的域內(nèi)的第一個(gè)source
this.sourceTargets 在controller的域內(nèi)所有的source組成的一個(gè)數(shù)組
this.hasSourceTarget 在controller的域內(nèi)是否有source
我們希望點(diǎn)擊按鈕時(shí)調(diào)用controller中的copy()方法，所以我們需要添加data-action=“clipboard#copy“
<button data-action="clipboard#copy">Copy to Clipboard</button>你可以已經(jīng)注意到在上面的動(dòng)作描述符中省略了click->。那是因?yàn)镾timulus給button設(shè)置了click作為它默認(rèn)的事件。
某些其他元素也有默認(rèn)事件。下面是個(gè)全部列表：
元素 | 默認(rèn)事件 |
a | click |
button | click |
details | toggle |
form | submit |
input | input |
input type=“submit” | click |
select | change |
textarea | input |
最終，在copy()方法中，我們獲取輸入框的內(nèi)容，調(diào)用粘貼板API
copy() {
navigator.clipboard.writeText(this.sourceTarget.value)
}刷新頁面，點(diǎn)擊按鈕，然后快捷鍵粘貼到Greet按鈕前到輸入框，可以看到1234。
到目前為止，在頁面上同一時(shí)間只有一個(gè)controller實(shí)例。在頁面上同時(shí)有一個(gè)controller的多個(gè)實(shí)例也是很正常的。
我們的controller是可以復(fù)用的，只要你需要在頁面上添加復(fù)制內(nèi)容的按鈕，無論是哪個(gè)頁面，只要把對(duì)應(yīng)的屬性值寫好，我們的controller都是生效的。
還是上面的例子，再添加另外一個(gè)復(fù)制按鈕：
<div data-controller="clipboard">
PIN: <input data-clipboard-target="source" type="text" value="3737" readonly>
<button data-action="clipboard#copy" class="clipboard-button">Copy to Clipboard</button>
</div>刷新頁面，驗(yàn)證一下兩個(gè)復(fù)制按鈕是否都生效。
我們?cè)偬砑右粋€(gè)可以復(fù)制的元素，不用button，我們用a標(biāo)簽，
<div data-controller="clipboard">
PIN: <input data-clipboard-target="source" type="text" value="6666" readonly>
<a href="#" data-action="clipboard#copy" class="clipboard-button">Copy to Clipboard</a>
</div>Stimulus允許我們使用任何元素，只要它設(shè)置了合適的data-action屬性，就可以觸發(fā)復(fù)制。
這個(gè)例子里，要注意一點(diǎn)，點(diǎn)擊鏈接會(huì)使瀏覽器追蹤a標(biāo)簽內(nèi)的href屬性跳轉(zhuǎn)，可以取消這種默認(rèn)行為，只需要在action中調(diào)用 event.preventDefault()就可以了。
copy(event) {
event.preventDefault()
navigator.clipboard.writeText(this.sourceTarget.value)
}還有另外一個(gè)方法，拷貝粘貼板上
copy(event) {
event.preventDefault()
this.sourceTarget.select()
document.execCommand("copy")
}在本文中，我們看了一個(gè)在現(xiàn)實(shí)中把瀏覽器API包裝在Stimulus的controller中的例子。還有一個(gè)controller的多個(gè)實(shí)例如何同時(shí)出現(xiàn)在頁面上，我們還探索了actions和targets如何保持HTML和JavaScript的松散耦合。
下一篇文章，我們將優(yōu)化一下這個(gè)復(fù)制粘貼板的功能，讓它運(yùn)行起來更加健壯。
Stimulus：瀏覽器不支持復(fù)制或者弱網(wǎng)條件下，怎么辦？
istory 是 window 對(duì)象中的一個(gè) JavaScript 對(duì)象，它包含了關(guān)于瀏覽器會(huì)話歷史的詳細(xì)信息。你所訪問過的 URL 列表將被像堆棧一樣存儲(chǔ)起來。瀏覽器上的返回和前進(jìn)按鈕使用的就是 history 的信息。
History 對(duì)象包含長度屬性，它包含了會(huì)話歷史記錄棧中的 URL 數(shù)量。例如，如果用戶在瀏覽器中打開一個(gè)標(biāo)簽頁，歷史記錄的長度將是 1（新的標(biāo)簽頁也是一個(gè)網(wǎng)頁）。然后用戶輸入一個(gè)網(wǎng)址 foo.com 并點(diǎn)擊回車，現(xiàn)在歷史記錄對(duì)象的長度將是 2, 用戶轉(zhuǎn)到其他頁面 bar.com，歷史記錄對(duì)象的長度將就是 3 了。
你可以使用 history 對(duì)象的 back 和 forward 方法來瀏覽網(wǎng)頁。例如，如果你想轉(zhuǎn)到上一個(gè)頁面，那么可以使用：
history.back()同樣的，如果你想轉(zhuǎn)到下一頁，你可以使用：
history.forward()如果您想向前或向后移動(dòng) n 個(gè)頁面，那么您可以使用 go 方法：
history.go(-2) // 倒退 2 頁
history.go(2) // 前進(jìn) 2 頁所以 history.go(1) 和 history.forward() 效果是相同的，history.go(-1) 和 history.go(-1) 效果是相同的。history.go 方法的默認(rèn)值為 0，如果不傳任何數(shù)字，則當(dāng)前頁面會(huì)被刷新。
window.history.go(0)
window.history.go()你也可以使用 pushState 和 replaceState 方法改變頁面的 URL。pushState 會(huì)改變頁面的 URL，并將改變后的 URL 添加到 history 對(duì)象的 URL 棧頂部。語法如下：
history.pushState(state, title, url)參數(shù) state 是狀態(tài)數(shù)據(jù)，它將被存儲(chǔ)在 history.state 變量中。參數(shù) title 是標(biāo)題文本，不過它對(duì)大多數(shù)瀏覽器都沒有效果，所以一般傳空字符串（""）或傳 null 就可以了。
讓我們?cè)诳刂婆_(tái)中嘗試一下，在執(zhí)行之前，比如打開 baidu.com，然后在控制臺(tái)輸入：
history.pushState('123', '', 'new-url')執(zhí)行上面的代碼后，它會(huì)將頁面地址欄中的 URL 改為 baidu.com/new-url，同時(shí)將 URL 添加到 history 對(duì)象中。此時(shí)檢查 history.length 會(huì)增加 1。
除此之外，我們還可以為每個(gè) URL 存儲(chǔ)狀態(tài)（當(dāng)前頁面的數(shù)據(jù)）。在上面的例子中，你會(huì)把 "123" 存儲(chǔ)在 history.state 變量中，當(dāng)你返回到這個(gè)頁面時(shí)，你就可以 history.state 再次拿到到這些數(shù)據(jù)。例如：
history.pushState('temp data 1', 'title', 'new-url-1')
history.state //"temp data 1"
history.pushState('temp data 2', 'title', 'new-url-2')
history.state //"temp data 2"
history.back()
history.state // "temp data 1"每當(dāng)通過 pushState 返回到之前被添加到歷史記錄的頁面時(shí)，瀏覽器就會(huì)觸發(fā)一個(gè)名為 popstate 的事件，并將 state 數(shù)據(jù)作為參數(shù)。比如在瀏覽器打開一個(gè)新標(biāo)簽頁，進(jìn)入某個(gè)網(wǎng)頁（比如 baidu.com），先監(jiān)聽 popstate 事件：
window.addEventListener('popstate', (e) => console.log(e))然后調(diào)用 pushState：
history.pushState({ name: 'test1' }, 'title', 'test1')然后按下返回按鈕，popstate 事件就會(huì)被觸發(fā)，你可以在監(jiān)聽事件中查看打印出來的數(shù)據(jù)。在打印的數(shù)據(jù)中，可以找到 history.state 的值。
注冊(cè) pushState 中的 url 可以是完整的 url，但必須和當(dāng)前頁面是相同的域名，否則會(huì)拋出跨域異常。
瀏覽器還有一個(gè) replaceState API，和 pushState 的區(qū)別是，它只改變了 URL，不會(huì)將 URL 添加到歷史記錄，這里就不再累述了。
現(xiàn)在我們做一個(gè)小的網(wǎng)頁應(yīng)用，這個(gè)應(yīng)用將實(shí)現(xiàn)如下功能：
我們先不關(guān)心 history API，先實(shí)現(xiàn)功能。下面是 html 關(guān)鍵代碼：
<select id="selectbox">
<option value="both">全部</option>
<option value="male">先生</option>
<option value="femalt">女士</option>
</select>
<ul id="userslist">
<li gender="male">張先生</li>
<li gender="female">李女士</li>
<li gender="female">王女士</li>
</ul>下面是 javascript 關(guān)鍵代碼：
let selectBox = document.getElementById('selectBox')
let usersList = document.getElementById('usersList')
selectBox.addEventListener('change', onSelectBoxChange)
function onSelectBoxChange(ev) {
let val = this.value
filterList(val)
}
function filterList(val) {
let users = usersList.children
for (let i = 0; i < users.length; i++) {
let user = users[i]
let gender = user.getAttribute('gender')
if (gender === val || val === 'both') {
user.style.display = ''
} else {
user.style.display = 'none'
}
}
}實(shí)現(xiàn)后的效果如下：
當(dāng)修改下拉列表時(shí)，為了使瀏覽器地址也發(fā)生變化，需要使用 pushSate 方法：
function onSelectBoxChange(ev) {
let val = this.value
filterList(val)
history.pushState({ gender: val }, null, val)
}當(dāng)我們?cè)谙吕蜻x擇“先生”時(shí)，瀏覽器的地址會(huì)變成：localhost:5000/male。效果如下：
此時(shí)會(huì)有個(gè)問題，當(dāng)我們點(diǎn)擊前進(jìn)/后退時(shí)，瀏覽器地址變了，但對(duì)應(yīng)的數(shù)據(jù)卻不對(duì)。因此，當(dāng)進(jìn)行前進(jìn)/后退時(shí)，我們需要監(jiān)聽 popstate 重新過濾數(shù)據(jù)：
window.addEventListener('popstate', onPopState)
function onPopState(ev) {
let state = ev.state
filterList(state.gender)
}我們還需要處理頁面刷新的問題。當(dāng)刷新頁面時(shí)，歷史記錄不會(huì)改變，history.state 的狀態(tài)值也保持不變。所以我們可以從 history.state 中取出當(dāng)前的狀態(tài)數(shù)據(jù)，利用 state.gender 的值就可以在 load 事件中來過慮出當(dāng)前 URL 對(duì)應(yīng)的用戶列表：
window.addEventListener('load', function () {
let gender = history.state ? history.state.gender : 'both'
filterList(gender)
})這是個(gè)簡單的示例，你也可以繼續(xù)進(jìn)一步優(yōu)化。今天的分享就到這里，有問題請(qǐng)?jiān)谙旅媪粞耘秪~
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
