Web Front-end
HTML Tutorial
What should I do if displayblock or inlineblock elements cannot be displayed under chrome?
What should I do if displayblock or inlineblock elements cannot be displayed under chrome?
What should I do if a display: inline-block or display: block element cannot be displayed normally under chrome?
The DEMO page has only one input box. When the input box has focus, the height becomes larger, and the word count display and reply button are displayed. .
The problem now is that Chrome can only click the input box after the first refresh and the height will increase and display the word count display and reply button elements. However, if you click the input box for the second time, only the height will increase, but you will not see it. Let’s get to the word count display and reply button elements (firefox is normal)
<head>
<meta charset="UTF-8">
<title>案例：人人网评论功能</title>
<style>.comment-input{width: 450px;}.input-area{outline: 0;border: 1px solid black;width:446px;height: 15px;}.input-area_expand{height: 45px;}.input-action{display: none;}.input-action_show{height: 26px;width: 102px;display: inline-block;
//这里display: block都试过了，只能在第一次刷新的时候看到，再点击第二次输入框就看不到了float: right;}
</style></head><body><p class="comment-input" style="border:1px solid red">
<textarea class="input-area" >
评论……</textarea><p class="input-action" style="border:1px solid red"><span class="inputed">0</span>/<span class="maxlength">140</span><a href="javascript:void(0)" class="reply-btn">回复</a></p></p></body>//获取下一个兄弟元素节点function getNextElement(node)
{ if(node.nodeType == 1){ return node; }
if(node.nextSibling){ return getNextElement(node.nextSibling); }
return false;} document.getElementsByClassName('input-area')[0].onfocus = function()
{this.className = 'input-area input-area_expand'var nextEl = getNextElement(this.nextSibling);
nextEl.className = 'input-action input-action_show';this.value = '';
console.log('focus:'+nextEl.className)}document.getElementsByClassName('input-area')[0].onblur = function() {var nextEl = getNextElement(this.nextSibling);nextEl.className = 'input-action';this.className = 'input-area'this.value = '评论……';console.log('blur :'+nextEl.className);}What should I do if the displayblock or inlineblock elements cannot be displayed under chrome? , please pay attention to other related articles on the php Chinese website for more information!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
What is Updater.exe in Windows 11/10? Is this the Chrome process?
Mar 21, 2024 pm 05:36 PM
Every application you run on Windows has a component program to update it. So if you are using Google Chrome or Google Earth, it will run a GoogleUpdate.exe application, check if an update is available, and then update it based on the settings. However, if you no longer see it and instead see a process updater.exe in the Task Manager of Windows 11/10, there is a reason for this. What is Updater.exe in Windows 11/10? Google has rolled out updates for all its apps like Google Earth, Google Drive, Chrome, etc. This update brings
What file is crdownload?
Mar 08, 2023 am 11:38 AM
crdownload is a chrome browser download cache file, which is a file that has not been downloaded; crdownload file is a temporary file format used to store files downloaded from the hard disk. It can help users protect file integrity when downloading files and avoid being damaged. Unexpected interruption or stoppage. CRDownload files can also be used to back up files, allowing users to save temporary copies of files; if an unexpected error occurs during downloading, CRDownload files can be used to restore downloaded files.
What to do if chrome cannot load plugins
Nov 06, 2023 pm 02:22 PM
Chrome's inability to load plug-ins can be solved by checking whether the plug-in is installed correctly, disabling and enabling the plug-in, clearing the plug-in cache, updating the browser and plug-ins, checking the network connection, and trying to load the plug-in in incognito mode. The solution is as follows: 1. Check whether the plug-in has been installed correctly and reinstall it; 2. Disable and enable the plug-in, click the Disable button, and then click the Enable button again; 3. Clear the plug-in cache, select Advanced Options > Clear Browsing Data, check cache images and files and clear all cookies, click Clear Data.
What is the Chrome plug-in extension installation directory?
Mar 08, 2024 am 08:55 AM
What is the Chrome plug-in extension installation directory? Under normal circumstances, the default installation directory of Chrome plug-in extensions is as follows: 1. The default installation directory location of chrome plug-ins in windowsxp: C:\DocumentsandSettings\username\LocalSettings\ApplicationData\Google\Chrome\UserData\Default\Extensions2. chrome in windows7 The default installation directory location of the plug-in: C:\Users\username\AppData\Local\Google\Chrome\User
How to solve the problem that Google Chrome cannot open web pages
Jan 04, 2024 pm 10:18 PM
What should I do if the Google Chrome web page cannot be opened? Many friends like to use Google Chrome. Of course, some friends find that they cannot open web pages normally or the web pages open very slowly during use. So what should you do if you encounter this situation? Let’s take a look at the solution to the problem that Google Chrome web pages cannot be opened with the editor. Solution to the problem that the Google Chrome webpage cannot be opened. Method 1. In order to help players who have not passed the level yet, let us learn about the specific methods of solving the puzzle. First, right-click the network icon in the lower right corner and select "Network and Internet Settings." 2. Click "Ethernet" and then click "Change Adapter Options". 3. Click the "Properties" button. 4. Double-click to open i
How to search for text across all tabs in Chrome and Edge
Feb 19, 2024 am 11:30 AM
This tutorial shows you how to find specific text or phrases on all open tabs in Chrome or Edge on Windows. Is there a way to do a text search on all open tabs in Chrome? Yes, you can use a free external web extension in Chrome to perform text searches on all open tabs without having to switch tabs manually. Some extensions like TabSearch and Ctrl-FPlus can help you achieve this easily. How to search text across all tabs in Google Chrome? Ctrl-FPlus is a free extension that makes it easy for users to search for a specific word, phrase or text across all tabs of their browser window. This expansion
what does chrome mean
Aug 07, 2023 pm 01:18 PM
Chrome means browser, a web browser developed by Google. It was first released in 2008 and quickly became one of the most popular browsers in the world. Its name comes from the browser's interface design because of its iconic The feature is the tab bar at the top of the window, and the appearance of this tab bar is very similar to chrome metal.
What software is chromesetup?
Mar 03, 2023 pm 02:58 PM
chromesetup is a Google browser installation program; Google Chrome is a simple and efficient web browsing tool developed by Google. It is characterized by simplicity and speed. Chrome supports multi-tab browsing, and each tab page is in Running in an independent "sandbox" improves security, and the crash of one tab page will not cause other tab pages to be closed.
