http://www.bulgaria-web-developers.com/projects/javascript/selectbox/
是否有“keypress”事件，以便用户可以跳转到特定选项？例如我们有国家字段，用户想要跳转到英国，那么他需要滚动查找列表中的英国。
jQuery SelectBox插件的按键事件处理
4
- user2006893
2
你能为此设置一个 Fiddle 吗？ - Jai
如果你想要键盘搜索支持，可以尝试使用SelectBoxIt。 - Greg Franko
5个回答
1
似乎有错误
尝试一下
尝试一下
$(document).keypress(function(e){
console.log(String.fromCharCode(e.keyCode));
});
- Suresh Atta
1
基于 Suresh Atta 的解决方案，我创建了以下 jQuery 扩展来实现该解决方案。
/*** EXTEND SELECT BOX TO HAVE KeyUp feature *********/
jQuery.fn.KeyUpSelectBox = function (options)
{
var myHandler = this;
this.init = function ()
{
var sb = $(this).selectbox(options);
var sbSelector = sb.attr('sb');
$("#sbHolder_" + sbSelector).on('keyup', function (e)
{
var currentOptionText = $("#sbSelector_" + sbSelector).text().toLowerI();
var keyText = String.fromCharCode(e.keyCode).toLowerI();
var selectOptions = myHandler.find('option');
var firstIndexWithLetter = -1;
var bSet = false;
var moveToNext = false;
var bFoundOption = false;
if (currentOptionText.substring(0, 1) == keyText)
{
moveToNext = true;
}
for (var i = 0; i < selectOptions.length; i++)
{
var optionText = $(selectOptions[i]).text().toLowerI();
//console.log(optionText + ': ' + optionText.substring(0, 1));
if (optionText.substring(0, 1) == keyText)
{
if (moveToNext)
{
if (firstIndexWithLetter == -1) { firstIndexWithLetter = i; }
if (bFoundOption)
{
sb.selectbox("change", $(selectOptions[i]).attr('value'), $(selectOptions[i]).html());
sb.val($(selectOptions[i]).attr('value'));
bSet = true;
break;
}
if (optionText == currentOptionText)
{
bFoundOption = true;
}
}
else
{
sb.selectbox("change", $(selectOptions[i]).attr('value'), $(selectOptions[i]).html());
sb.val($(selectOptions[i]).attr('value'));
break;
}
}
}
if (moveToNext && !bSet && (firstIndexWithLetter != -1))
{
sb.selectbox("change", $(selectOptions[firstIndexWithLetter]).attr('value'), $(selectOptions[firstIndexWithLetter]).html());
sb.val($(selectOptions[firstIndexWithLetter]).attr('value'));
}
});
}
myHandler.init();
return myHandler;
}
这个扩展使用了一个名为toLowerI的方法，它是字符串原型中的一种：
var patternLetters = /[öäüÖÄÜáàâéèêúùûóòôÁÀÂÉÈÊÚÙÛÓÒÔßãÃõÕçÇñÑ]/g;
var patternDateDmy = /^(?:\D+)?(\d{1,2})\.(\d{1,2})\.(\d{2,4})$/;
var lookupLetters = {
"ä": "a", "ö": "o", "ü": "u",
"Ä": "A", "Ö": "O", "Ü": "U",
"á": "a", "à": "a", "â": "a",
"é": "e", "è": "e", "ê": "e",
"ú": "u", "ù": "u", "û": "u",
"ó": "o", "ò": "o", "ô": "o",
"Á": "A", "À": "A", "Â": "A",
"É": "E", "È": "E", "Ê": "E",
"Ú": "U", "Ù": "U", "Û": "U",
"Ó": "O", "Ò": "O", "Ô": "O",
"ß": "s", "ã": "a", "Ã": "A",
"õ": "o", "Õ": "O", "ç": "c",
"Ç": "C", "ñ": "n", "Ñ": "N"
};
var letterTranslator = function (match)
{
return lookupLetters[match] || match;
}
String.prototype.toLowerI = function ()
{
return this.toLowerCase().replace(patternLetters, letterTranslator);
};
为了使用它，不要调用.selectbox()，而是调用.KeyUpSelectBox()
- epocas
1
我无法在按键松开时使其工作，我最终做的是监听文档上的按键按下事件，并检查选项是否可见。不过这是个不错的解决方案。 - ContextSwitch
1
好的。在'epocas'的回答基础上，我将此代码集成到“jquery.selectbox-0.2.js”文件中，而不是像'epocas'的解决方案那样进行扩展...
插入发生在此处
sbHolder.data("uid", inst.uid).bind("keydown.sb", function (e) { ... });
这是完整的插入内容:
sbHolder.data("uid", inst.uid).bind("keydown.sb", function (e) {
var letterTranslator = function (match){
return lookupLetters[match] || match;
};
String.prototype.toLowerI = function (){
return this.toLowerCase().replace(patternLetters, letterTranslator);
};
var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0,
$this = $(this),
uid = $this.data("uid"),
inst = $this.siblings("select[sb='"+uid+"']").data(PROP_NAME),
trgt = $this.siblings(["select[sb='", uid, "']"].join("")).get(0),
$f = $this.find("ul").find("a." + inst.settings.classFocus),
sb = $this,
currentOptionText = $("#sbSelector_" + uid).text().toLowerI(),
keyText = String.fromCharCode(e.keyCode).toLowerI(),
selectOptions = $this.find("li a"),
firstIndexWithLetter = -1,
bSet = false,
moveToNext = false,
bFoundOption = false,
patternLetters = /[öäüÖÄÜáàâéèêúùûóòôÁÀÂÉÈÊÚÙÛÓÒÔßãÃõÕçÇñÑ]/g,
patternDateDmy = /^(?:\D+)?(\d{1,2})\.(\d{1,2})\.(\d{2,4})$/,
lookupLetters = {
"ä": "a", "ö": "o", "ü": "u",
"Ä": "A", "Ö": "O", "Ü": "U",
"á": "a", "à": "a", "â": "a",
"é": "e", "è": "e", "ê": "e",
"ú": "u", "ù": "u", "û": "u",
"ó": "o", "ò": "o", "ô": "o",
"Á": "A", "À": "A", "Â": "A",
"É": "E", "È": "E", "Ê": "E",
"Ú": "U", "Ù": "U", "Û": "U",
"Ó": "O", "Ò": "O", "Ô": "O",
"ß": "s", "ã": "a", "Ã": "A",
"õ": "o", "Õ": "O", "ç": "c",
"Ç": "C", "ñ": "n", "Ñ": "N"
};
if (currentOptionText.substring(0, 1) == keyText){
moveToNext = true;
}
$("a", $this).removeClass(inst.settings.classFocus);
for (var i = 0; i < selectOptions.length; i++){
var optionText = $(selectOptions[i]).text().toLowerI();
if (optionText.substring(0, 1) == keyText){
if (moveToNext){
if (firstIndexWithLetter == -1) {
firstIndexWithLetter = i;
}
if (bFoundOption){
$(selectOptions[i]).addClass(inst.settings.classFocus).focus();
$("#sbSelector_" + uid).text(optionText);
bSet = true;
break;
}
if (optionText == currentOptionText){
bFoundOption = true;
}
}
else{
$(selectOptions[i]).addClass(inst.settings.classFocus).focus();
$("#sbSelector_" + uid).text(optionText);
break;
}
}
}
switch (key) {
case 37: //Arrow Left
case 38: //Arrow Up
if ($f.length > 0) {
var $next;
$("a", $this).removeClass(inst.settings.classFocus);
$next = $f.parent().prevAll("li:has(a)").eq(0).find("a");
if ($next.length > 0) {
$next.addClass(inst.settings.classFocus).focus();
$("#sbSelector_" + uid).text($next.text());
}
}
break;
case 39: //Arrow Right
case 40: //Arrow Down
var $next;
$("a", $this).removeClass(inst.settings.classFocus);
if ($f.length > 0) {
$next = $f.parent().nextAll("li:has(a)").eq(0).find("a");
} else {
$next = $this.find("ul").find("a").eq(0);
}
if ($next.length > 0) {
$next.addClass(inst.settings.classFocus).focus();
$("#sbSelector_" + uid).text($next.text());
}
break;
case 13: //Enter
if ($f.length > 0) {
self._changeSelectbox(trgt, $f.attr("rel"), $f.text());
}
self._closeSelectbox(trgt);
break;
case 9: //Tab
if (trgt) {
var inst = self._getInst(trgt);
if (inst/* && inst.isOpen*/) {
if ($f.length > 0) {
self._changeSelectbox(trgt, $f.attr("rel"), $f.text());
}
self._closeSelectbox(trgt);
}
}
var i = parseInt($this.attr("tabindex"), 10);
if (!e.shiftKey) {
i++;
} else {
i--;
}
$("*[tabindex='" + i + "']").focus();
break;
case 27: //Escape
self._closeSelectbox(trgt);
break;
}
e.stopPropagation();
return false;
}).delegate("a", "mouseover", function (e) {
$(this).addClass(inst.settings.classFocus);
}).delegate("a", "mouseout", function (e) {
$(this).removeClass(inst.settings.classFocus);
});
- Charles Robertson
2
很棒的解决方案@charles - Shekhar Pankaj
@ShekharPankaj 谢谢。这是一个相当古老的帖子，但我很高兴它对某人有用... - Charles Robertson
1
这是一个带有按键触发的工作插件。它会动态地搜索你输入的连续n个符号。如果你等待1.5秒，搜索将从第一个符号重新开始。
(function ($, undefined) {
var PROP_NAME = 'selectbox',
FALSE = false,
TRUE = true,
selectbox_keys = "",
selectbox_keys_timeout = 0;
/**
* Selectbox manager.
* Use the singleton instance of this class, $.selectbox, to interact with the select box.
* Settings for (groups of) select boxes are maintained in an instance object,
* allowing multiple different settings on the same page
*/
function Selectbox() {
this._state = [];
this._defaults = { // Global defaults for all the select box instances
classHolder: "sbHolder",
classHolderDisabled: "sbHolderDisabled",
classSelector: "sbSelector",
classOptions: "sbOptions",
classGroup: "sbGroup",
classSub: "sbSub",
classDisabled: "sbDisabled",
classToggleOpen: "sbToggleOpen",
classToggle: "sbToggle",
classFocus: "sbFocus",
speed: 200,
effect: "slide", // "slide" or "fade"
onChange: null, //Define a callback function when the selectbox is changed
onOpen: null, //Define a callback function when the selectbox is open
onClose: null //Define a callback function when the selectbox is closed
};
}
$.extend(Selectbox.prototype, {
/**
* Is the first field in a jQuery collection open as a selectbox
*
* @param {Object} target
* @return {Boolean}
*/
_isOpenSelectbox: function (target) {
if (!target) {
return FALSE;
}
var inst = this._getInst(target);
return inst.isOpen;
},
/**
* Is the first field in a jQuery collection disabled as a selectbox
*
* @param {HTMLElement} target
* @return {Boolean}
*/
_isDisabledSelectbox: function (target) {
if (!target) {
return FALSE;
}
var inst = this._getInst(target);
return inst.isDisabled;
},
/**
* Attach the select box to a jQuery selection.
*
* @param {HTMLElement} target
* @param {Object} settings
*/
_attachSelectbox: function (target, settings) {
if (this._getInst(target)) {
return FALSE;
}
var $target = $(target),
self = this,
inst = self._newInst($target),
sbHolder, sbSelector, sbToggle, sbOptions,
s = FALSE, optGroup = $target.find("optgroup"), opts = $target.find("option"), olen = opts.length;
$target.attr("sb", inst.uid);
$.extend(inst.settings, self._defaults, settings);
self._state[inst.uid] = FALSE;
$target.hide();
function closeOthers() {
var key, sel,
uid = this.attr("id").split("_")[1];
for (key in self._state) {
if (key !== uid) {
if (self._state.hasOwnProperty(key)) {
sel = $("select[sb='" + key + "']")[0];
if (sel) {
self._closeSelectbox(sel);
}
}
}
}
}
sbHolder = $("<div>", {
"id": "sbHolder_" + inst.uid,
"class": inst.settings.classHolder,
"tabindex": $target.attr("tabindex")
});
sbSelector = $("<a>", {
"id": "sbSelector_" + inst.uid,
"href": "#",
"class": inst.settings.classSelector,
"click": function (e) {
e.preventDefault();
closeOthers.apply($(this), []);
var uid = $(this).attr("id").split("_")[1];
if (self._state[uid]) {
self._closeSelectbox(target);
} else {
self._openSelectbox(target);
}
}
});
sbToggle = $("<a>", {
"id": "sbToggle_" + inst.uid,
"href": "#",
"class": inst.settings.classToggle,
"click": function (e) {
e.preventDefault();
closeOthers.apply($(this), []);
var uid = $(this).attr("id").split("_")[1];
if (self._state[uid]) {
self._closeSelectbox(target);
} else {
self._openSelectbox(target);
}
}
});
sbToggle.appendTo(sbHolder);
sbOptions = $("<ul>", {
"id": "sbOptions_" + inst.uid,
"class": inst.settings.classOptions,
"css": {
"display": "none"
}
});
$target.children().each(function(i) {
var that = $(this), li, config = {};
if (that.is("option")) {
getOptions(that);
} else if (that.is("optgroup")) {
li = $("<li>");
$("<span>", {
"text": that.attr("label")
}).addClass(inst.settings.classGroup).appendTo(li);
li.appendTo(sbOptions);
if (that.is(":disabled")) {
config.disabled = true;
}
config.sub = true;
getOptions(that.find("option"), config);
}
});
function getOptions () {
var sub = arguments[1] && arguments[1].sub ? true : false,
disabled = arguments[1] && arguments[1].disabled ? true : false;
arguments[0].each(function (i) {
var that = $(this),
li = $("<li>"),
child;
if (that.is(":selected")) {
sbSelector.text(that.text());
s = TRUE;
}
if (i === olen - 1) {
li.addClass("last");
}
if (!that.is(":disabled") && !disabled) {
child = $("<a>", {
"href": "#" + that.val(),
"rel": that.val()
}).text(that.text()).bind("click.sb", function (e) {
if (e && e.preventDefault) {
e.preventDefault();
}
var t = sbToggle,
$this = $(this),
uid = t.attr("id").split("_")[1];
self._changeSelectbox(target, $this.attr("rel"), $this.text());
self._closeSelectbox(target);
}).bind("mouseover.sb", function () {
var $this = $(this);
$this.parent().siblings().find("a").removeClass(inst.settings.classFocus);
$this.addClass(inst.settings.classFocus);
}).bind("mouseout.sb", function () {
$(this).removeClass(inst.settings.classFocus);
});
if (sub) {
child.addClass(inst.settings.classSub);
}
if (that.is(":selected")) {
child.addClass(inst.settings.classFocus);
}
child.appendTo(li);
} else {
child = $("<span>", {
"text": that.text()
}).addClass(inst.settings.classDisabled);
if (sub) {
child.addClass(inst.settings.classSub);
}
child.appendTo(li);
}
li.appendTo(sbOptions);
});
}
if (!s) {
sbSelector.text(opts.first().text());
}
$.data(target, PROP_NAME, inst);
//sbHolder.data("uid", inst.uid).bind("keydown.sb", function (e) {
sbHolder.data("uid", inst.uid).keypress(function(e) {
var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0,
$this = $(this),
uid = $this.data("uid"),
inst = $this.siblings("select[sb='"+uid+"']").data(PROP_NAME),
trgt = $this.siblings(["select[sb='", uid, "']"].join("")).get(0),
$f = $this.find("ul").find("a." + inst.settings.classFocus);
switch (key) {
case 37: //Arrow Left
case 38: //Arrow Up
if ($f.length > 0) {
var $next;
$("a", $this).removeClass(inst.settings.classFocus);
$next = $f.parent().prevAll("li:has(a)").eq(0).find("a");
if ($next.length > 0) {
$next.addClass(inst.settings.classFocus).focus();
$("#sbSelector_" + uid).text($next.text());
}
}
break;
case 39: //Arrow Right
case 40: //Arrow Down
var $next;
$("a", $this).removeClass(inst.settings.classFocus);
if ($f.length > 0) {
$next = $f.parent().nextAll("li:has(a)").eq(0).find("a");
} else {
$next = $this.find("ul").find("a").eq(0);
}
if ($next.length > 0) {
$next.addClass(inst.settings.classFocus).focus();
$("#sbSelector_" + uid).text($next.text());
}
break;
case 13: //Enter
if ($f.length > 0) {
self._changeSelectbox(trgt, $f.attr("rel"), $f.text());
}
self._closeSelectbox(trgt);
break;
case 9: //Tab
if (trgt) {
var inst = self._getInst(trgt);
if (inst/* && inst.isOpen*/) {
if ($f.length > 0) {
self._changeSelectbox(trgt, $f.attr("rel"), $f.text());
}
self._closeSelectbox(trgt);
}
}
var i = parseInt($this.attr("tabindex"), 10);
if (!e.shiftKey) {
i++;
} else {
i--;
}
$("*[tabindex='" + i + "']").focus();
break;
case 27: //Escape
self._closeSelectbox(trgt);
break;
default:
var theChar = String.fromCharCode(key);
var cur_check = selectbox_keys+theChar.toLowerCase();
$next = -1;
$this.find("ul").find("a").each(function() {
var text = jQuery(this).text().toLowerCase();
if (text.indexOf(cur_check) == 0) {
$next = jQuery(this);
selectbox_keys = cur_check;
return 0;
}
});
if ($next != -1) {
$("a", $this).removeClass(inst.settings.classFocus);
$next.addClass(inst.settings.classFocus).focus();
$("#sbSelector_" + uid).text($next.text());
}
clearTimeout(selectbox_keys_timeout);
var selectbox_keys_timeout = setTimeout(function() {
selectbox_keys = "";
},1500);
break;
}
e.stopPropagation();
return false;
}).delegate("a", "mouseover", function (e) {
$(this).addClass(inst.settings.classFocus);
}).delegate("a", "mouseout", function (e) {
$(this).removeClass(inst.settings.classFocus);
});
sbSelector.appendTo(sbHolder);
sbOptions.appendTo(sbHolder);
sbHolder.insertAfter($target);
$("html").on('mousedown', function(e) {
e.stopPropagation();
$("select").selectbox('close');
});
$([".", inst.settings.classHolder, ", .", inst.settings.classSelector].join("")).mousedown(function(e) {
e.stopPropagation();
});
},
/**
* Remove the selectbox functionality completely. This will return the element back to its pre-init state.
*
* @param {HTMLElement} target
*/
_detachSelectbox: function (target) {
var inst = this._getInst(target);
if (!inst) {
return FALSE;
}
$("#sbHolder_" + inst.uid).remove();
$.data(target, PROP_NAME, null);
$(target).show();
},
/**
* Change selected attribute of the selectbox.
*
* @param {HTMLElement} target
* @param {String} value
* @param {String} text
*/
_changeSelectbox: function (target, value, text) {
var onChange,
inst = this._getInst(target);
if (inst) {
onChange = this._get(inst, 'onChange');
$("#sbSelector_" + inst.uid).text(text);
}
value = value.replace(/\'/g, "\\'");
$(target).find("option[value='" + value + "']").attr("selected", TRUE);
if (inst && onChange) {
onChange.apply((inst.input ? inst.input[0] : null), [value, inst]);
} else if (inst && inst.input) {
inst.input.trigger('change');
}
},
/**
* Enable the selectbox.
*
* @param {HTMLElement} target
*/
_enableSelectbox: function (target) {
var inst = this._getInst(target);
if (!inst || !inst.isDisabled) {
return FALSE;
}
$("#sbHolder_" + inst.uid).removeClass(inst.settings.classHolderDisabled);
inst.isDisabled = FALSE;
$.data(target, PROP_NAME, inst);
},
/**
* Disable the selectbox.
*
* @param {HTMLElement} target
*/
_disableSelectbox: function (target) {
var inst = this._getInst(target);
if (!inst || inst.isDisabled) {
return FALSE;
}
$("#sbHolder_" + inst.uid).addClass(inst.settings.classHolderDisabled);
inst.isDisabled = TRUE;
$.data(target, PROP_NAME, inst);
},
/**
* Get or set any selectbox option. If no value is specified, will act as a getter.
*
* @param {HTMLElement} target
* @param {String} name
* @param {Object} value
*/
_optionSelectbox: function (target, name, value) {
var inst = this._getInst(target);
if (!inst) {
return FALSE;
}
//TODO check name
inst[name] = value;
$.data(target, PROP_NAME, inst);
},
/**
* Call up attached selectbox
*
* @param {HTMLElement} target
*/
_openSelectbox: function (target) {
var inst = this._getInst(target);
//if (!inst || this._state[inst.uid] || inst.isDisabled) {
if (!inst || inst.isOpen || inst.isDisabled) {
return;
}
var el = $("#sbOptions_" + inst.uid),
viewportHeight = parseInt($(window).height(), 10),
offset = $("#sbHolder_" + inst.uid).offset(),
scrollTop = $(window).scrollTop(),
height = el.prev().height(),
diff = viewportHeight - (offset.top - scrollTop) - height / 2,
onOpen = this._get(inst, 'onOpen');
el.css({
"top": height + "px",
"maxHeight": (diff - height) + "px"
});
inst.settings.effect === "fade" ? el.fadeIn(inst.settings.speed) : el.slideDown(inst.settings.speed);
$("#sbToggle_" + inst.uid).addClass(inst.settings.classToggleOpen);
this._state[inst.uid] = TRUE;
inst.isOpen = TRUE;
if (onOpen) {
onOpen.apply((inst.input ? inst.input[0] : null), [inst]);
}
$.data(target, PROP_NAME, inst);
},
/**
* Close opened selectbox
*
* @param {HTMLElement} target
*/
_closeSelectbox: function (target) {
var inst = this._getInst(target);
//if (!inst || !this._state[inst.uid]) {
if (!inst || !inst.isOpen) {
return;
}
var onClose = this._get(inst, 'onClose');
inst.settings.effect === "fade" ? $("#sbOptions_" + inst.uid).fadeOut(inst.settings.speed) : $("#sbOptions_" + inst.uid).slideUp(inst.settings.speed);
$("#sbToggle_" + inst.uid).removeClass(inst.settings.classToggleOpen);
this._state[inst.uid] = FALSE;
inst.isOpen = FALSE;
if (onClose) {
onClose.apply((inst.input ? inst.input[0] : null), [inst]);
}
$.data(target, PROP_NAME, inst);
},
/**
* Create a new instance object
*
* @param {HTMLElement} target
* @return {Object}
*/
_newInst: function(target) {
var id = target[0].id.replace(/([^A-Za-z0-9_-])/g, '\\\\$1');
return {
id: id,
input: target,
uid: Math.floor(Math.random() * 99999999),
isOpen: FALSE,
isDisabled: FALSE,
settings: {}
};
},
/**
* Retrieve the instance data for the target control.
*
* @param {HTMLElement} target
* @return {Object} - the associated instance data
* @throws error if a jQuery problem getting data
*/
_getInst: function(target) {
try {
return $.data(target, PROP_NAME);
}
catch (err) {
throw 'Missing instance data for this selectbox';
}
},
/**
* Get a setting value, defaulting if necessary
*
* @param {Object} inst
* @param {String} name
* @return {Mixed}
*/
_get: function(inst, name) {
return inst.settings[name] !== undefined ? inst.settings[name] : this._defaults[name];
}
});
/**
* Invoke the selectbox functionality.
*
* @param {Object|String} options
* @return {Object}
*/
$.fn.selectbox = function (options) {
var otherArgs = Array.prototype.slice.call(arguments, 1);
if (typeof options == 'string' && options == 'isDisabled') {
return $.selectbox['_' + options + 'Selectbox'].apply($.selectbox, [this[0]].concat(otherArgs));
}
if (options == 'option' && arguments.length == 2 && typeof arguments[1] == 'string') {
return $.selectbox['_' + options + 'Selectbox'].apply($.selectbox, [this[0]].concat(otherArgs));
}
return this.each(function() {
typeof options == 'string' ?
$.selectbox['_' + options + 'Selectbox'].apply($.selectbox, [this].concat(otherArgs)) :
$.selectbox._attachSelectbox(this, options);
});
};
$.selectbox = new Selectbox(); // singleton instance
$.selectbox.version = "0.2";
})(jQuery);
- Sam Ivichuk
0
你可以自己创造。
- 选择select框
- 添加一个
.keyup()事件监听器 - 在这个事件监听器中，查找按下的按钮
- 如果按下的按钮与一个项目匹配（或是项目的第一个字符），通过
.trigger('click')触发该项目的单击事件
理论上应该会有效。
- Zim84
1
如果有两个元素都以按下的键开始，那该怎么办？ - Suresh Atta
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接