-
2022-03-07 17:54:30
鼠标悬浮文本框显示文本内容 触发文本框方法
通过鼠标事件来触发控制 input titile 属性
<input type="text" class="form-control" id="wb"> <script type="text/javascript"> jQuery(function($){ $(document).off("mouseenter","#wb").on("mouseenter","#wb",function(){//触发事件 $(this).attr("title",$(this).val()) }).off("mouseleave","#wb").on("mouseleave","#wb",function(){ }); }); </script>
更多相关内容 -
element中利用tooltip实现文字超出框悬浮显示
2021-01-20 14:00:44之前遇到过这个需求,所以就把自己的成果和大家分享下成果^ ^ 我是利用了element-ui里面的tooltip组件进行一个二次封装,大家可以... // 显示的文字内容 content: { type: String, default: () => { return '' } -
poi 设置文本框
2020-05-09 11:09:26//文字字符属性 CTTextCharacterProperties rpr = tb1.getCTShape().getTxBody().getPArray(0).getRArray(0).getRPr(); //设置字体 rpr.addNewLatin().setTypeface("Trebuchet MS"); //设置字体大小9pt rpr.setSz...1、pom.xml
<dependency> <groupId>org.apache.poi</groupId> <artifactId>poi-ooxml</artifactId> <version>4.1.2</version> </dependency> <dependency> <groupId>org.apache.poi</groupId> <artifactId>poi-ooxml-schemas</artifactId> <version>4.1.2</version> </dependency> <dependency> <groupId>org.apache.poi</groupId> <artifactId>poi</artifactId> <version>4.1.2</version> </dependency> <dependency> <groupId>org.apache.commons</groupId> <artifactId>commons-collections4</artifactId> <version>4.4</version> </dependency> <dependency> <groupId>commons-codec</groupId> <artifactId>commons-codec</artifactId> <version>1.13</version> </dependency> <dependency> <groupId>org.apache.commons</groupId> <artifactId>commons-compress</artifactId> <version>1.19</version> </dependency> <dependency> <groupId>org.apache.xmlbeans</groupId> <artifactId>xmlbeans</artifactId> <version>3.1.0</version> </dependency> <dependency> <groupId>org.apache.poi</groupId> <artifactId>ooxml-schemas</artifactId> <version>1.4</version> </dependency>
2、poi 设置文本框
package com.poi.test; import java.awt.Color; import java.io.*; import org.apache.poi.xssf.usermodel.*; import org.openxmlformats.schemas.drawingml.x2006.main.CTTextCharacterProperties; public class XlsColors23 { static String fileName = "I:/home/irfs/data_file/temp/TestWorkbook23.xlsx"; public static void main(String[] args) throws Exception { XSSFWorkbook wb = new XSSFWorkbook(); XSSFSheet sht = wb.createSheet(); File file = new File(fileName); //列开始值 int colStart = 5; //创建画布 XSSFDrawing draw = sht.createDrawingPatriarch(); //创建锚点(0,0,0,0,col1, row1, col2, row2) /*创建一个新的客户端锚,并设置左上角和右下角 *通过单元格引用和偏移量锚定的坐标。 * @param dx1第一个单元格内的x坐标。 * @param dy1第一个单元格内的y坐标。 * @param dx2第二个单元格内的x坐标。 * @param dy2第二个单元格内的y坐标。 * @param col1第一个单元格的列(从0开始)。 * @param row1第一个单元格的行(从0开始)。 * @param col2第二个单元格的列(从0开始)。 * @param row2第二个单元格的行(从0开始)。 */ XSSFClientAnchor createAnchor = draw.createAnchor(0, 0, 0, 0, colStart, 11, colStart + 6, 11+7); //XSSFShapeGroup group = draw.createGroup(createAnchor); //*设置该组的坐标空间。 所有孩子都受到约束至这些坐标。( x1, y1, x2, y2) //group.setCoordinates(colStart, 11, colStart + 6, 11+7); //创建子锚点,左上角和右下角( x, y, cx, cy) //XSSFChildAnchor childAnchor = new XSSFChildAnchor(0, 0, 6, 7); //创建文本框 //XSSFTextBox tb1 = group.createTextbox(childAnchor); //创建文本框 XSSFTextBox tb1 = draw.createTextbox(createAnchor); //设置边框颜色,黑色 tb1.setLineStyleColor(0, 0, 0); //设置边框宽度 //tb1.setLineWidth(2); //设置填充色,白色 Color col = Color.white; tb1.setFillColor(col.getRed(), col.getGreen(), col.getBlue()); //富文本字符串 XSSFRichTextString address = new XSSFRichTextString("测试"); tb1.setText(address); //文字字符属性 CTTextCharacterProperties rpr = tb1.getCTShape().getTxBody().getPArray(0).getRArray(0).getRPr(); //设置字体 rpr.addNewLatin().setTypeface("Trebuchet MS"); //设置字体大小9pt rpr.setSz(900); //设置字体颜色,蓝色 col = Color.blue; rpr.addNewSolidFill().addNewSrgbClr().setVal(new byte[]{(byte)col.getRed(),(byte)col.getGreen(),(byte)col.getBlue()}); FileOutputStream fout = new FileOutputStream(file); wb.write(fout); fout.close(); wb.close(); } }
-
react 文字溢出缩略...,鼠标悬浮时,文字缩略的div弹出完整文本框
2022-04-08 17:08:22/* 判断文字是否溢出,当溢出才显示popover */ const hover = () => { const checkDom = myDom.cloneNode(); checkDom.className = Styles.CloneNode; checkDom.innerHTML = myDom.innerHTML; const parent ...直接上代码
js判断部分
/* 判断文字是否溢出,当溢出才显示popover */ const hover = () => { const checkDom = myDom.cloneNode(); checkDom.className = Styles.CloneNode; checkDom.innerHTML = myDom.innerHTML; const parent = myDom.parentNode; parent.appendChild(checkDom); const flag = checkDom.offsetWidth > myDom.offsetWidth || checkDom.offsetHeight > myDom.offsetHeight; parent.removeChild(checkDom); setPopoverVisible(flag); };
css部分
.Cell { :global { .ant-popover-content { white-space: pre-line; } .ant-popover-inner-content { max-height: 300px; overflow: auto; } } display: inline-block; vertical-align: middle; .Readonly { overflow: hidden; text-overflow: ellipsis; white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 1; /* autoprefixer: off */ -webkit-box-orient: vertical; } .CloneNode { position: absolute; white-space: pre-line; opacity: 0; z-index: -1; & > span { display: inline-block; width: inherit; line-height: 21px; } } }
jsx部分
<div className={ Styles.Cell }> { popoverVisible && showPopover ? <Popover overlayStyle={{ width: popWidth }} getPopupContainer={triggerNode => triggerNode.parentNode} content={ value } arrowPointAtCenter autoAdjustOverflow={true}> <div className={ Styles.Readonly } style={style} ref={(ref)=>{setMyDom(ref)}} onMouseEnter={ (e) => { hover() } } > { value || '-' } </div> </Popover> : <div className={ Styles.Readonly } style={style} ref={(ref)=>{setMyDom(ref)}} onMouseEnter={ (e) => { hover() } } > { value || '-' } </div> } </div>
-
pygame做界面之文本框
2019-12-01 19:33:17效果图 ...'文字显示' ) bf_lebel . text_align = TEXT_ALIGN_RIGHT btn_panel . add_control ( bf_lebel ) 其他完整的代码已经上传github https://github.com/zhangenter/bf_control效果图
主要代码
bf_label.py
# -*- coding=utf-8 -*- import threading import pygame from pygame.locals import MOUSEBUTTONDOWN from bf_common import BFControlId,BFBase,DEFAULT_FONT,TEXT_ALIGN_LEFT,TEXT_ALIGN_MIDDLE,TEXT_ALIGN_RIGHT CLICK_EFFECT_TIME = 100 PADDING = 4 class BFLabel(BFBase): def __init__(self, parent, rect, text='Label', click=None): super().__init__() self.x,self.y,self.width,self.height = rect self.bg_color = (225,225,225) self.parent = parent self.surface = parent.subsurface(rect) self.is_hover = False self.in_click = False self.click_loss_time = 0 self.click_event_id = -1 self.ctl_id = BFControlId().instance().get_new_id() self._text = text self._click = click self.init_font() def init_font(self): font = DEFAULT_FONT white = 100, 100, 100 self.textImage = font.render(self._text, True, white) w, h = self.textImage.get_size() self._ty = (self.height - h) / 2 if self._text_align == TEXT_ALIGN_LEFT: self._tx = PADDING elif self._text_align == TEXT_ALIGN_MIDDLE: self._tx = (self.width - PADDING * 2 - w) / 2 else: self._tx = (self.width - PADDING - w) @property def text(self): return self._text @text.setter def text(self, value): self._text = value self.init_font() @property def click(self): return self._click @click.setter def click(self, value): self._click = value def clear_hover(self): self.is_hover = False def update(self, event): if self.in_click and event.type == pygame.USEREVENT+1 and BFControlId().instance().click_id == self.ctl_id: if self._click: self._click(self) self.click_event_id = -1 return True x, y = pygame.mouse.get_pos() if x > self.x and x < self.x + self.width and y > self.y and y < self.y + self.height: if self.panel: self.panel.clear_hover() self.is_hover = True if event.type == MOUSEBUTTONDOWN: pressed_array = pygame.mouse.get_pressed() if pressed_array[0]: self.in_click = True if self.panel: self.panel.clear_foucs() self.click_loss_time = pygame.time.get_ticks() + CLICK_EFFECT_TIME BFControlId().instance().click_id = self.ctl_id pygame.time.set_timer(pygame.USEREVENT+1,CLICK_EFFECT_TIME-10) return True else: self.is_hover = False return False def draw(self): if self.in_click: if self.click_loss_time < pygame.time.get_ticks(): self.in_click = False if not self._visible: return self.surface.blit(self.textImage, (self._tx, self._ty))
使用方式
bf_lebel = BFLabel(screen, (20,80,160,40),text='文字显示') bf_lebel.text_align = TEXT_ALIGN_RIGHT btn_panel.add_control(bf_lebel)
其他完整的代码已经上传github
https://github.com/zhangenter/bf_control -
怎么在Android中实现一个自由拖动并显示文字的悬浮框
2021-05-28 06:49:05怎么在Android中实现一个自由拖动并显示文字的悬浮框发布时间:2021-01-27 15:34:05来源:亿速云阅读:107作者:Leah今天就跟大家聊聊有关怎么在Android中实现一个自由拖动并显示文字的悬浮框,可能很多人都不太了解... -
js文本框或者按钮鼠标悬停提示说明文字
2021-06-12 15:38:47html页面中很多元素会用到.../*显示说明性文字*/function tips(id,str){t= getTop(document.getElementById(id))-document.getElementById(id).offsetHeight;l= getLeft(document.getElementById(id));document.ge... -
单行文字长度超过文本框width值导致换行问题
2017-05-01 17:52:25单行文字长度超过文本框width值导致换行问题 -
vue文字悬浮提示
2020-03-03 09:40:04在线案例 -
vue中p标签文字过长截断悬浮显示
2022-06-10 14:23:28vue 文案过长 截断处理 悬浮显示 -
文本框里文字悬浮触发事件
2012-01-11 11:28:45import flash.text.TextField; import flash.text.TextFieldAutoSize; //指示灯 var alterSprite:Sprite = new Sprite(); alterSprite.x = 100; alterSprite.y = 100;...addChild(alterSprite);...var txt:TextField -
利用js实现前台动态添加文本框,后台获取文本框内容(示例代码)
2021-06-11 13:18:48一共两个页面,分别如下:一.创建页面create.jsp复制代码 代码如下:var count=0 ;function additem(id){var row,cell,str;row = document.getElementByIdx_x(id).insertRow();if(row != null ){cell = row.... -
Java能不能做当鼠标移动到按钮或文本框上时显示提示信息
2021-03-09 04:59:55//设置文字颜色 Label.setToolTipText("这是一个注释"); //为标签添加一串注释 Panel.add(Label); //向容器内添加此标签 JButton Button=new JButton("退出"); //添加一个内容为“退出”的按钮 Button.setFont... -
css实现文本框中内容超出长度显示省略号,鼠标移入悬浮显示全部内容
2021-12-14 11:48:53文本框中的内容,超长显示省略号 采用title属性后,就可以悬浮展示文本框中的内容;但是有个弊端,就是长度没有很长的时候,文本框中的全部内容能全部展示,此时的悬浮是没有必要存在的,但是实际上还是有的; 对于... -
three 悬浮提示框
2020-12-23 16:21:12three 实现悬浮提示框效果 提示: 我现在这边是用的vue2.0的项目来使用的three 1.事前了解 对于悬浮提示框,官方提供了好几种做法。精灵图等做法。 而我选了CSS3DObject,把一个CSS元素转化成一个three的3D对象插入... -
悬浮显示input中所有的内容及css处理文字过长时显示为多余部分省略
2020-12-20 07:51:29在一个内容框中,由于框的宽度是固定的,但是里面的内容却有很多这个时候需要悬浮显示input中所有的内容,而title提示则要在input添加以下代码,这样既可实现用title提示文本框中所有内容 如果input里面的内容固定,... -
js设置文字颜色的方法示例
2020-11-27 18:22:26本文实例讲述了js设置文字颜色的方法。分享给大家供大家参考,具体如下: <h1>aaabbbccc 不允许在h1标签中添加任何字符,可以通过css或js定义,使其aaa为红色bbb为黄色ccc为蓝色 <!DOCTYPE ... -
html中input文本框鼠标悬停提示文本内容,使用onmouseover属性失效
2021-12-16 18:06:10在input中有disabled属性时,onmouseover便会失效,可以使用readonly代替 <input class="form-control" type="text" disabled="disabled" onmouseover="this.title=this.value"/> <input class="form-... -
将文字定位到浮动图片上|CSS
2022-05-01 10:43:42将文字定位到浮动图片上CSS 效果展示 <div class="remmend-item"> <div class="image"> <img :src="dataItem.picUrl" alt=""> <span> {{ playCount }} </span> </div> <... -
文字超出长度用省略号代替,鼠标悬停以悬浮框显示(Vue)
2020-08-11 10:46:08html代码: <div class="info-item"> <ul> <li v-for="(v, index) in notifyInfo" :key="index" class="li-info-item">...span class="info-title" :title="v.title">...span class= -
Vue实现鼠标经过文字显示悬浮框效果的示例代码
2020-12-19 08:24:06需求在所做的Vue项目中,需要在鼠标移动文字框的时候显示一些详细信息。最终实现的效果如下:鼠标经过button的时候,可以在光标附近显示出一个悬浮框,显示框里面显示时间和值的信息,鼠标移出button元素的时候,这... -
js之鼠标的悬浮框
2020-12-29 10:52:17js之鼠标的悬浮框 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>... -
(vb6小技巧)鼠标在文本框一按下就选中所有文字
2012-01-10 16:59:41很多软件都有鼠标在文本框TextBox一按下,就选中所有文字的功能,是怎么实现的? Private Sub Text1_GotFocus() Text1.SelStart = 0 Text1.SelLength = Len(Text1.Text) End Sub 转载于:... -
原生js实现 悬浮当前文本 判断如果为空时 显示当前文本的提示内容
2022-07-18 19:26:00原生js实现 悬浮当前文本 判断如果为空时 显示当前文本的提示内容
收藏数
2,132
精华内容
852