• 博客园logo
  • 会员
  • 周边
  • 新闻
  • 博问
  • 闪存
  • 众包
  • 赞助商
  • Chat2DB
    • 搜索
      所有博客
    • 搜索
      当前博客
  • 写随笔 我的博客 短消息 简洁模式
    用户头像
    我的博客 我的园子 账号设置 会员中心 简洁模式 ... 退出登录
    注册 登录
Leonny's Blog
走自己的路
博客园    首页    新随笔    联系   管理    订阅  订阅

如何取得輸入字符串的寬度

最近做項目的時候需要得到所輸入的字符串的寬度, 想了很久, 也google也很久, 最後還是無解.
後來想想, 是否可以變通一下, 從別的地方取得它的寬度. 經過一番頭腦風暴.
終於得出了解決辦法:
<script language="javascript" type="text/javascript">
<!--
//int : 取得輸入字符串的寬度
function getStrWidth(str)
{
    
var w = 0;
    
var id = 'check_new_line_span_leonny';
    
var s = document.getElementById(id);
    s.innerHTML 
= str;
    s.style.display 
= '';
    w 
= s.scrollWidth;
    s.style.display 
= 'none';
    
return w;
}
//-->
</script>

<input type="text" id="text1" name="text1" value="" style="font-size:12px;font-family:'Palatino linotype';" />
<br />
<input type="button" value="Get Text Width" onclick="alert(getStrWidth(document.getElementById('text1').value));" />
<br />
<span id="check_new_line_span_leonny" style="font-size:12px;font-family:'Palatino linotype';white-space:nowrap;"></span>
這裡有一個要注意的地方, 就是textbox的字體大小和字體要與span的一致.而且span必需設置while-space: nowrap (不自動換行)才行.

不過最後發現, 這個支持英文, 對中文好像不感冒. @_@
posted @ 2007-09-07 16:34  Leonny  阅读(769)  评论(2)    收藏  举报
刷新页面返回顶部
博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3