获取textarea框的滚动条有问题

获取textarea框的滚动条有问题，可能是因为浏览器兼容性问题或者CSS样式设置不正确。以下是一些可能的解决方案：

检查浏览器兼容性：确保您的代码在目标浏览器中运行正常。可以使用工具如BrowserStack或Sauce Labs进行测试。
使用CSS样式设置滚动条样式：

textarea::-webkit-scrollbar {
  width: 12px;
}

textarea::-webkit-scrollbar-track {
  background: #f1f1f1;
}

textarea::-webkit-scrollbar-thumb {
  background: #888;
}

textarea::-webkit-scrollbar-thumb:hover {
  background: #555;
}

使用JavaScript获取滚动条位置：

var textarea = document.getElementById("myTextarea");
var scrollTop = textarea.scrollTop;
var scrollLeft = textarea.scrollLeft;

使用JavaScript设置滚动条位置：

var textarea = document.getElementById("myTextarea");
textarea.scrollTop = 100;
textarea.scrollLeft = 50;

如果以上方法仍然无法解决问题，请提供更多详细信息，以便更好地帮助您解决问题。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

PHP获取表单textarea数据中的换行问题

1999/xhtml"> PHP获取表单...area数据中的换行问题 1....PHP函数nl2br()是在字符串中的每个新行(\r\n)之前插入HTML换行符:; 2.Windows下的换行是(\r\n); 3.在记事本中,\r或\n均有换行的功能;

2.8K3 0

js获取div编辑框，textarea，input text的光标位置，兼容FF和IE

xhtml1/DTD/xhtml1-transitional.dtd"> js获取...div编辑框，textarea，input text的光标位置，兼容FF和IE <div id="Div1" onclick="getValue(this);" onkeyup="getValue(this);" contenteditable="true...注意div编辑框源码里面是嵌套有其他标签的，可以正常返回正确位置！

7.6K6 0

Chrome滚动条透明的问题

在做一个小应用的时候，给一个面板设置了透明度(opacity:.9)，在浏览页面的时候，发现滚动条居然透明了，如下图所示： ?...然后想是不是可以使用自定义来解决这个问题，找到这篇文章--《不用装扩展也可自定义Chrome滚动条的样式》 ::-webkit-scrollbar-track-piece{ background-color...webkit-scrollbar-thumb:hover{ height:50px; background-color:#9f9f9f; -webkit-border-radius:4px; } 现在的效果

1.9K1 0

原生JS解决安卓机 inputtextarea输入键盘遮盖输入框

问题描述： h5开发时，input/textarea输入框在安卓手机中，获取焦点时，键盘会直接在页面上方弹出，如果你的输入框刚好在页面下方就会被弹出的键盘遮挡，也无法向上滑动使其显示，如下图所示： ?...这里用textarea举例 input也是同样的 2.当输入框获得焦点时，让页面滚动条至最底部...isAndroid()) return;//判断是否是安卓机 setTimeout(() => { let div = document.getElementById("root");//获取根节点...div.scrollTop = div.scrollHeight;//滚动条至底（这里没有写的很严谨，需要减去输入框自身高offsetHeight，效果都一样） }, 500)...;//键盘拉起的延迟时间 } 问题解决，效果如下图： ?

4K4 0

关于获取EditText编辑框中的值为空的问题

Regis.this.setResult(0,intent); finish(); } }); } 此时是获取不到编辑框中的值...，当把红色部分放置在按钮的监听函数中就可以获取到。

3K1 0

javaScript和jQuery获取、设置textarea标签的内容（取值和赋值）

今天用到 textarea 的取值，顺便整理一下它的取值和赋值。...HTML部分：提交 javaScript 获取 textarea 的值通过 element.value 和 element.innerHTML 获取， .value 亲测有效。...var info = text.value;//方法一 var info = text.innerHTML;//方法二 console.log(info); } jQuery 获取...textarea 的值 textarea 是表单元素，所以 val() 可用；它又是闭合标签，所以 html() 和 text() 可用。

13.5K2 0

JS - 可自动伸缩高度的文本框

文本框的默认现象： textarea如果设置cols和rows来规定textarea的尺寸，那么textarea的默认宽高是这俩属性设置的值，可以通过鼠标拖拽缩放文本框的尺寸。...textarea如果设定了宽高，那么如果文本超出框的高度，会自动出现滚动条。而不会撑开文本框的高度。如果什么也不设置，最小宽高很窄很细，随便输入内容也会超出文本框隐藏，且自动增加滚动条。 ?...因为文本框的宽高固定死了，还是超出出现了滚动条。怎么让文本框初始化设置一定的高度，但是文字超出时自动跟随内容的高度伸缩？...而且如果用户一直不点击别的地方让textarea失去焦点，这个事件就永远不会触发，文本框的高度就不变。比如输入过程中，就成了这样： ? 然后点击别的地方才会一次性的展开： ?...答：就是计算文本框的滚动高度，即内容高度具体怎么做？答：键盘每次弹起的时候，获取文本框的内容高度添加给文本框的高度，即可让其实时的跟随内容自适应。内容高度用什么属性计算？

9.3K2 0

textarea内容自动撑开高度，实现高度自适应

大家好，我是前端队长Daotin，想要获取更多前端精彩内容，关注我(全网同名)，解锁前端成长新姿势。以下正文： textarea使我们常用的表单元素。一般用于多行文字的输入。...在绝大多数情况下，都可以满足我们的要求。但是它有一个缺点是，它的高度是固定了，如果文本内容超出了它设定的高度时，就会显示出丑陋的滚动条。...具体思路：当出现滚动条的时候，文本的实际高度就是**scrollHeight**，我们只需要设置文本框的高度为内容的**scrollHeight**即可。代码实现： <!...+ 'px'; }); 注意点：由于textarea默认是有padding 的，所以在设置文本框高度的时候要减去padding*2 需要在每次设置...scrollHeight之前，设置一次文本框的初始高度textarea.style.height = '100px';，这样在文本内容减少的时候，文本框的高度才会减少。

23K5 0

AWT常用组件

ScrollPane 带水平及垂直滚动条的容器组件 TextArea 多行文本域 TextField 单行文本框这些 AWT 组件的用法比较简单，可以查阅 API 文档来获取它们各自的构方法、成员方法等详细信息...TextField 类的构造方法有4种重载形式，通过给参数赋值，可以设置文本框中的初始文本字符，以及文本框的列数。TextField类的构造方法见表。...TextArea类的构造方法有5 种重载形式，通过参数赋值，不但可以像 TextField 一样指定初始化文本内容、列数，而且可以指定文本域的行数、垂直滚动条的显示。...不显示滚动条 SCROLLBARS_VERTICAL_ONLY 显示垂直滚动条 除了与TextField相似的常用成员方法，类TextArea还经常用到成员方法append(String str)，...对话框是可以独立存在的顶级窗口，因此用法与普通窗口的用法几乎完全一样，但是使用对话框需要注意下面两点：注意事项对话框通常依赖于其他窗口，就是通常需要有一个父窗口；对话框有非模式(non-modal

851 0

jquery获取input框的几种方式

//如何用jquery获取中输入的值？

2.5K2 0

Java开发GUI之可编辑区域原

Java开发GUI之可编辑区域 Java的awt包中提供了单行的文本编辑组件TextField与多行的文本编辑区TextArea，这两个组件都是继承自TextComponent类。...textArea = new TextArea("是时候表演真正的技术了···",5,20); pannel.add(textArea); frame.add(pannel); frame.pack...public synchronized TextListener[] getTextListeners(); TextField用于单行的文本输入，并且可以设置密文输入，对登录框十分适用： //构造方法...public synchronized ActionListener[] getActionListeners(); TextArea类中的方法总结如下： //构造方法 public TextArea...void setColumns(int columns); //获取滚动条模式 public int getScrollbarVisibility();

5222 0

如何去掉antd中Input、Textarea组件获取焦点时的蓝色边框

Ant Design 的 Input 输入框组件在获取焦点时会有蓝色的边框，尝试用 outline:none 去掉这个边框，但是发现不管用。...最终通过 F12 调试发现 Ant Design 的 Input 组件在获取焦点时蓝色边框是通过 box-shadow 来实现的。...修改 Textarea 聚焦的默认边框： textarea,textarea.ant-input:hover,textarea:focus{ border: 1px solid #DAE2F3;... -webkit-box-shadow: none; box-shadow: none; } 声明：本文由w3h5原创，转载请注明出处：《如何去掉antd中Input、Textarea组件获取焦点时的蓝色边框

13.4K3 0

vue3如何获取绑定在组件上的 textarea DOM元素

setup lang="ts"> import { ref, onMounted } from "vue"; onMounted(() => { transferTextarea.value.textarea.select...(); }); <el-input v-model="initText" :rows="5" type="textarea" placeholder=..."" /> 当我们给自定义组件绑定 ref，想要获取 textarea 元素时，elemtplus 的 input textarea 元素获取方式如上，注意：获取 DOM 必须要在 onMounted...之后获取，否则获取的为 null。

1.9K2 0

一文搞懂 JavaScript 中 DOM 相关的距离

一、问题由来刚开始学 DOM 操作中对于元素距离元素的距离问题总是迷迷糊糊的，虽然有万能的 getCurrentStyle 方式来取得所需要的属性，但是有时看别人的代码的时候，总会遇到很多简写的方式...textarea.scrollLeft = 0(横向滚动条滚动的距离) textarea.offsetLeft = 10(元素左外border距离父元素左内border的距离) 当我把滚动条加上的时候...= static），这个定位父元素就是我们计算所有offset属性的参照物。元素的 offsetParent 的获取方式：通过元素的offsetParent属性直接获取。...：三、鼠标事件相关的坐标距离鼠标事件中有很多描述鼠标事件发生时的坐标信息的，给大家介个图看看：这么多的坐标位置到底有什么区别呢？...其实我们之间的问题，从来都不是距离。

1.4K3 1

使用 CodeMirror 打造属于自己的在线代码编辑器

默认情况下，显示一个红点（•），这个红点有一个带有前面特殊字符编码的提示框。...scrollbarStyle: string 设置滚动条。默认为”native”，显示原生的滚动条。核心库还提供了”null”样式，此样式会完全隐藏滚动条。Addons可以设置更多的滚动条模式。...autofocus: boolean 是否在初始化时自动获取焦点。默认情况是关闭的。但是，在使用textarea并且没有明确指定值的时候会被自动设置为true。...---- 如果你要设置代码框的大小该怎么做呢？ 1 editor.setSize('800px', '950px'); //设置代码框的长宽另外，如果你想给代码框赋值，该怎么办呢？...12 editor.setValue(""); //给代码框赋值editor.getValue(); //获取代码框的值如果你再想在其他地方设置新的属性，可以像下面这样写： 1 editor.setOption

3.3K0 0

微信小程序textarea 上下移动文本框文字不动的解决方法

搬砖的时候弄了别人写好的页面过来，然后在小程序开发工具上啥事都没有，到了手机上打开就发现文本框都移上去了，文字怎么还留在原地，而且还能编辑，最大的问题是这还是客人在用我们的小程序的时候发现的，当时的场面我也不知道怎么形容...， ezgif.com-resize.gif 后来百度了一下，有人说把textarea 的fixed属性设为true就能解决， image.png image.png 但是我查看代码发现已经设了的啊...，这时作为一个程序员想着一个方向走不通那就反方向走一遍，把textarea的fixed属性去掉，然后就好了

1.9K9 0

codemirror自定义代码提示_96图文编辑器

默认情况下，显示一个红点（•），这个红点有一个带有前面特殊字符编码的提示框。...scrollbarStyle: string 设置滚动条。默认为”native”，显示原生的滚动条。核心库还提供了”null”样式，此样式会完全隐藏滚动条。Addons可以设置更多的滚动条模式。...autofocus: boolean 是否在初始化时自动获取焦点。默认情况是关闭的。但是，在使用textarea并且没有明确指定值的时候会被自动设置为true。...---- 如果你要设置代码框的大小该怎么做呢？ editor.setSize('800px', '950px'); //设置代码框的长宽另外，如果你想给代码框赋值，该怎么办呢？...editor.setValue(""); //给代码框赋值 editor.getValue(); //获取代码框的值如果你再想在其他地方设置新的属性，可以像下面这样写： editor.setOption

3.5K2 0

duilib的Combo控件滚动条不显示的问题

duilib的Combo控件的下拉框是一个独立的子窗口，类名：CComboWnd。...从duilib的源码可以知道，CComboUI控件在Add到布局上的时候，自己的m_pManager还是当前所在窗口的管理器指针，这样默认的滚动条样式图片等都在其中。...但是下拉框子窗体CComboWnd却有自己的一个CPaintManagerUI对象m_pm，而这个m_pm却没有从m_pManager中拿到滚动条的样式等资源(好像字体也是，好在字体可以直接指定全局共享...)，这样就出现了滚动条不显示的问题。...其实duilib原本设计的应该是通过dropbox属性来设置下拉框的属性等，只是我也没去调试这个dropbox的属性值应该怎么去写。所以就冒昧改了一下源码。

1.9K4 0

html滚动条使用，以及页面有多个div块，如何让body页面不使用滚动条，只在某个div内使用滚动条

大家好，又见面了，我是你们的朋友全栈君。 滚动条基本知识：建议比价华丽的页面使用overflow:scroll这个样式的滚动条，比较好看。...或<body style="overflow:hidden"> 2.设定多行文本框的滚动条...没有水平滚动条 没有垂直滚动条 没有滚动条 ...或 3.设定窗口滚动条的颜色设置窗口滚动条的颜色为红色<body style="scrollbar-base-color

4.6K3 0

uni-app textarea auto-height 文字出现上下滚动

Contents 1 前言 2 解决思路 3 原理 4 关于前言帮一个可爱的小姐姐改一个uni-app构建的微信小程序时，在使用textarea组件时遇到的一点小问题。...描述问题：在uni-app中,的auto-hetght属性会出现高度不够，文字能够上下移动的问题,具体见下图: ? 当输入的文字过多时,textarea内的文字可以上下滚动。...这不属于产品的需求，产品要的是输入框高度随着文字的变化而变化不能出现滚动条，而在uni-app打包的微信小程序中却出现了滚动解决思路排查原生微信小程序中是否有该问题在微信小程序原生语法中尝试使用该组件...说明是uni-app编译的小程序会出现这个bug 进一步排查，查看小程序工具中调试工具Wxml下的Dom以及style 初始没有输入文本的时候，微信小程序的textarea有一个height:22.5px...所以，修改uni-app的输入框中文本的行高即可解决该问题。关于文章首发于:uni-app textarea auto-hetght 文字出现上下滚动

3.1K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云