For.html projects, add placeholder.js after introducing jquery to the page you need
Since I’m a vue+elementUI project, I don’t refresh the browser every time I switch menus, so I’ve cleaned up the usage in vUE
Jquery file also needs to be introduced here, otherwise the error may be reported. Just introduce jquery in index.html
Here’s how to use it in a Vue
First create placeholder.js file in the public JS file and output a PlaceholderInit function
//Solve the problem that the placeholder of input is not displayed under ie.
export function PlaceholderInit() {
return jQuery(function() {
var placeholderfriend = {
focus: function(s) {
s = $(s)
.hide()
.prev()
.show()
.focus();
var idValue = s.attr("id");
if (idValue) {
s.attr("id", idValue.replace("placeholderfriend", ""));
}
var clsValue = s.attr("class");
if (clsValue) {
s.attr("class", clsValue.replace("placeholderfriend", ""));
}
}
};
//Determine if placeholder support is available.
function isPlaceholer() {
var input = document.createElement("input");
return "placeholder" in input;
}
//Unsupported Codes
if (!isPlaceholer()) {
$(function() {
var form = $(this);
var elements = form.find("input[type='text'][placeholder]");
elements.each(function() {
var s = $(this);
var pValue = s.attr("placeholder");
var sValue = s.val();
if (pValue) {
if (sValue == "") {
s.val(pValue);
}
}
});
elements.focus(function() {
var s = $(this);
var pValue = s.attr("placeholder");
var sValue = s.val();
if (sValue && pValue) {
if (sValue == pValue) {
s.val("");
}
}
});
elements.blur(function() {
var s = $(this);
var pValue = s.attr("placeholder");
var sValue = s.val();
if (!sValue) {
s.val(pValue);
}
});
var elementsPass = form.find("input[type='password'][placeholder]");
elementsPass.each(function(i) {
var s = $(this);
var pValue = s.attr("placeholder");
var sValue = s.val();
if (pValue) {
if (sValue == "") {
var html = this.outerHTML || "";
html = html
.replace(
/\s*type=(['"])?password\1/gi,
" type=text placeholderfriend"
)
.replace(/\s*(?:value|on1[a-z]+|name)(=(['"])?\S*\1)?/gi, " ")
.replace(
/\s*placeholderfriend/,
" placeholderfriend value='" +
pValue +
"' " +
"οnfοcus='placeholderfriendfocus(this);' "
);
var idValue = s.attr("id");
if (idValue) {
s.attr("id", idValue + "placeholderfriend");
}
var clsValue = s.attr("class");
if (clsValue) {
s.attr("class", clsValue + "placeholderfriend");
}
s.hide();
s.after(html);
}
}
});
elementsPass.blur(function() {
var s = $(this);
var sValue = s.val();
if (sValue == "") {
var idValue = s.attr("id");
if (idValue) {
s.attr("id", idValue + "placeholderfriend");
}
var clsValue = s.attr("class");
if (clsValue) {
s.attr("class", clsValue + "placeholderfriend");
}
s.hide()
.next()
.show();
}
});
});
}
window.placeholderfriendfocus = placeholderfriend.focus;
});
}
Deconstruct PlaceholderInit function
on pages that need to display placeholders
import { PlaceholderInit } from '@/utils/placeholder'
Call this function before the page is displayed, so that the place where the current page needs to display placeholders will display
when the page comes in
PlaceholderInit();
If the input page of a new pop-up box needs to display placeholders, the function
will also be called when the new pop-up box is opened
Read More:
- How to Fix “HTTP 405 method not allowed” Error
- How to Fix Taro SwipeAction Not Working Issue
- How to solve Uncaught (in promise) error in VUE?
- How to Solve “Vue is not defined” Error
- Vue2.0: How to Use vue3 api to encapsulate Axios
- How to open a page in a new window by Vue router
- [Solved] AES encryption in ie11 results in an error (missing ‘)‘
- [Solved] Failed to load plugin ‘vue‘ declared in ‘.eslintrc.js‘: createRequire is not a function
- [Solved] Vue Error: Uncaught TypeError: Vue.createApp is not a function
- The solution to the problem that the custom styles of UI components such as element-ui in the vue project do not take effect
- How to Solve Vue route jump repeated clicks Error
- [Solved] Vue Route Error: Uncaught TypeError: (0 , vue__WEBPACK_IMPORTED_MODULE_42__.defineComponent) is not a function
- [Solved] vue3vite Error: Failed to resolve import “@vue/server-renderer from “src\App.vue“. Does the file exist
- How to Solve Vue add element Install Error
- Vue: How to Solve error avoided redundant navigation to current location: “/xxx”
- How to Solve Vue3 using deep syntax Error
- How to Solve Vue editor bridge error
- How to Solve Vue3 Import lodash error
- Vue: How to Solve Eslint error
- [Solved] Vue3.0 Error: The component has been registered but not used vue/no-unused-components, Close eslint