草庐IT

javascript - textarea 模仿效果不佳。任何替代品？

coder 2023-08-02 原文

我有这个 html 和 css:http://jsfiddle.net/b7rDL/6/

HTML:

<div class="text-block" contenteditable="true" spellcheck="false">Some Text</div>

CSS:

.text-block {
    resize: none;
    font-size:40px;
    border: none;
    line-height: 1;
    -moz-appearance: textfield-multiline;
    -webkit-appearance: textarea;
    min-width: 30px;
    overflow: visible;
    white-space: nowrap;
    display: inline-block;
}

此代码允许我编写没有宽度限制或高度限制的文本。它不显示滚动条，它随文本一起增长。这些基本上是我需要的功能。

  1. 如何将其转换为具有相同行为的常规文本区域？我希望它能在没有实现“contenteditable”的浏览器上工作。因此我想用 textarea 或其他 basiv 元素替换 div。我该怎么做？ (我不介意使用 JavaScript)。
  2. 如何禁用拼写检查程序？ spellcheck=false 不起作用。在这个例子中，当我关注文本框时，我看到了那条有问题的红线。我正在使用火狐。
  3. 当我专注时如何摆脱边界？ - 已解决

我不介意使用 JavaScript 来解决这些问题。

这些问题的任何答案都会对我有所帮助。

谢谢

更新:
@Oylex 帮我解决了 3

最佳答案

#1

工作 fiddle 在这里:http://jsfiddle.net/d9H9w/11/ (在 IE8、Chrome 和 Firefox 中测试)

您需要在用户在文本框中输入时设置宽度和高度属性。

高度

这很简单:

  1. 获取textarea的内容
  2. 匹配换行符
  3. 将高度设置为 em 中换行符的总数(第一行加一个，摆动空间加 1.5)。

以 em 为单位设置高度使该字体大小不可知，因此它适用于多种字体大小。

function getNewlines(){
    // get the value(text) of the textarea
    var content = textEl.value;

    //use regex to find all the newline characters
    var newLines = content.match(/\n/g);

    // use the count of newlines(+1 for the first line + 1 for a buffer)
    // to set the height of the textarea.
    textEl.style.height = ((newLines && newLines.length || 0)+2.5)+'em';
};

宽度

这也很容易，只要有一个问题。

  1. 获取textarea的内容
  2. 拆分换行符以获得由文本区域的行组成的数组
  3. 排序以获得最长的行
  4. 将宽度设置为 em 中最长字符串的长度，乘以大约 .6(我的代码中的 emRatio)，再加上 2 em 的缓冲区空间。

最后一部分是关键。 'em' 测量值应该是一个正方形，表示单个字符占据的宽度和高度。这不考虑字距调整，因此字符的高度通常是准确的，但宽度取决于它周围的字符。因此，通过猜测和检查，我认为 .6 em 大约是字距调整后字符的平均宽度。 .6 非常接近，所以我在宽度上增加了 2 em 以获得一点缓冲空间。

var emRatio = .6;
function longestLine(){
    // get the value(text) of the textarea
    var content = textEl.value;

    // split on newline's. this creates an array, where each item in
    // the array is the text of one line
    var a = content.split('\n');

    // use a sorting function to order the items in the array:
    // longest string to shortest string
    a.sort(function(a,b){return b.length - a.length});

    // use the longest string * the emRatio to set the width
    // Due to kerning, the letters aren't ever really 1em x 1em
    // So I'm multiplying by an approximate ratio here (guess and check)
    textEl.style.width = (a[0].length * emRatio + 2)+ 'em';
};

此实现存在的问题

  • 为了支持在长按按键期间调整大小，还必须包含一个 onkeydown 处理程序(这对于不包括长按按键的所有情况并不是最佳的)

综合考虑，我认为这符合您的需要。

编辑

我没有将 emRatio 设置为 .7，而是将其更改为 .6，并在宽度上添加了 2 ems 的缓冲区。这解决了@Naor 在他的评论中提到的两个问题。

我更新了 fiddle 链接和 Width 部分以反射(reflect)更改。

关于javascript - textarea 模仿效果不佳。任何替代品？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13864711/

替代品javascriptthetextareasectionhtmlcss

有关javascript - textarea 模仿效果不佳。任何替代品？的更多相关文章

  1. ruby - 如何将脚本文件的末尾读取为数据文件(Perl 或任何其他语言) - 2

    我正在寻找执行以下操作的正确语法(在Perl、Shell或Ruby中):#variabletoaccessthedatalinesappendedasafileEND_OF_SCRIPT_MARKERrawdatastartshereanditcontinues. 最佳答案 Perl用__DATA__做这个:#!/usr/bin/perlusestrict;usewarnings;while(){print;}__DATA__Texttoprintgoeshere 关于ruby-如何将脚

  2. ruby - 在 jRuby 中使用 'fork' 生成进程的替代方案？ - 2

    在MRIRuby中我可以这样做:deftransferinternal_server=self.init_serverpid=forkdointernal_server.runend#Maketheserverprocessrunindependently.Process.detach(pid)internal_client=self.init_client#Dootherstuffwithconnectingtointernal_server...internal_client.post('somedata')ensure#KillserverProcess.kill('KILL',

  3. ruby-on-rails - link_to 不显示任何 rails - 2

    我试图在索引页中创建一个超链接，但它没有显示，也没有给出任何错误。这是我的index.html.erb代码。ListingarticlesTitleTextssss我检查了我的路线，我认为它们也没有问题。PrefixVerbURIPatternController#Actionwelcome_indexGET/welcome/index(.:format)welcome#indexarticlesGET/articles(.:format)articles#indexPOST/articles(.:format)articles#createnew_articleGET/article

  4. ruby-on-rails - RSpec:避免使用允许接收的任何实例 - 2

    我正在处理旧代码的一部分。beforedoallow_any_instance_of(SportRateManager).toreceive(:create).and_return(true)endRubocop错误如下:Avoidstubbingusing'allow_any_instance_of'我读到了RuboCop::RSpec:AnyInstance我试着像下面那样改变它。由此beforedoallow_any_instance_of(SportRateManager).toreceive(:create).and_return(true)end对此:let(:sport_

  5. ruby-on-rails - 更好的替代方法 try( :output). try( :data). try( :name)? - 2

    “输出”是一个序列化的OpenStruct。定义标题try(:output).try(:data).try(:title)结束什么会更好？:) 最佳答案 或者只是这样:deftitleoutput.data.titlerescuenilend 关于ruby-on-rails-更好的替代方法try(:output).try(:data).try(:name)?，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.c

  6. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  7. ruby - 允许主机名包含下划线的 URI.parse 的替代方法 - 2

    我正在使用DMOZ的listofurltopics，其中包含一些具有包含下划线的主机名的url。例如:608609TheOuterHeaven610InformationandimagegalleryofMcFarlane'sactionfiguresforTrigun,Akira,TenchiMuyoandotherJapaneseSci-Fianimations.611Top/Arts/Animation/Anime/Collectibles/Models_and_Figures/Action_Figures612虽然此url可以在网络浏览器中使用(或者至少在我的浏览器中可以使用:

  8. ruby-on-rails - 如果条件与 &&，是否有任何性能提升 - 2

    如果用户是所有者，我有一个条件来检查说删除和文章。delete_articleifuser.owner?另一种方式是user.owner?&&delete_article选择它有什么好处还是它只是一种写作风格 最佳答案 性能不太可能成为该声明的问题。第一个要好得多-它更容易阅读。您future的自己和其他将开始编写代码的人会为此感谢您。 关于ruby-on-rails-如果条件与&&，是否有任何性能提升，我们在StackOverflow上找到一个类似的问题：

  9. ruby-on-rails - RoR中是否有任何内置方法可以为整数填充零？ - 2

    如果我想要“00001”而不是“1”，除了我自己写填零方法之外，有没有内置的方法可以帮助我为整数填零？ 最佳答案 puts"%05d"%1#00001参见:String::%,Kernel::sprintf这是正在发生的事情。%左侧的"%05d"是C风格的格式说明符。%右边的变量就是要格式化的东西。格式说明符可以像这样解码:%-格式说明符的开头0-用前导零填充5-长度为5个字符d-被格式化的是一个整数如果你要格式化多个东西，你会把它们放在一个数组中:"%d-%s"%[1,"One"]#=>1-one

  10. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

随机推荐